Membuat Breadcrumb Google di Blogger

Membuat Breadcrumb Google di Blogger. Memasang atau membuat google breadcrumb ini sangat penting dan sangat dibutuhkan untuk sebuah blog karena dengan memasang google breadcrumb, dapat menutupi salah satu kekurangan blogger yaitu alamat url posting yang terbatas dan kadang terlihat kurang bagus. Selain itu, dengan Google breadcrumb akan membuat blog kita di search engine google lebih terlihat rapi. Coba sobat lihat contoh Google Breadcrumb di bawah ini.

Cara Membuat Breadcrumb Google di Blogger

Membuat Breadcrumb Google di Blogger

Pada artikel Membuat Breadcrumb Google di Blogger ini menampilkan semua label yang ada pada sebuah postingan, jadi akan terlihat lebih sempurna lagi dan cepat terindex di SERP [Search Engine Results Page]. Perlu diingat, jika sobat memiliki label yang banyak pada sebuah postingan atau mungkin postingan tersebut memiliki label yang cukup panjang, maka ini akan terlihat sedikit jelek. Usahakan jangan terlalu banyak label dan jangan terlalu panjang membuat label. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini.

Cara Memasang Breadcrumb Google di Blogspot / Blogger
  • Langkah pertama sobat login dulu ke blog, itu pasti. kwa kwa kwa,,
  • Seperti biasa, kita langsung menuju halaman Design [Rancangan] » Edit HTML » Ceklis Expand Widget Templates (jangan lupa selalu backup template sebelum editing). Jika sobat menggunakan tampilan baru, silahkan klik Template » Edit HTML » Lanjutkan » Ceklis Expand Widget Templates.
  • Jika sobat telah memasang kode breadcrumb sebelumnya, silahkan delete [hapus] dulu.
  • Kemudian sobat cari kode <b:include data='top' name='status-message'/> biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang sobat temukan biar tidak bingung).
<b:include data='posts' name='breadcrumb'/>
  • Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page www.wakrizki.net -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive and search pages www.wakrizki.net -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Sampai tahap ini silahkan simpan template sobat. Taraaaaaa, sobat berhasil Membuat Breadcrumb Google di Blogger.

Untuk mempercantik Breadcrumb google yang sudah sobat buat, sekarang tambahkan sedikit sentuhan CSS berikut ini yang perlu sobat tambahkan di atas kode ]]></b:skin>
.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }
Itu saja artikel blogger kali ini dan mudah-mudahan bermanfaat buat para sobat blogger. Happy blogging..

Referensi by http://www.bamz.us/

30 Komentar "Membuat Breadcrumb Google di Blogger", Baca atau Masukkan Komentar

ucil said...

sip mantab, coba dulu.. yg agak susah ngapus breadcrumb yg lama nih ckckckkc

Muhammad Khoerol Anam said...

hahaha. . .makasih mas tak coba dulu :)

Belajar Gitar Online said...

itu efek kodenya berapa lama mas baru terlihat di search engine?

Kon-Blog said...

makasih codingnya
salam kenal:D

MasTer Q said...

@Belajar Gitar Online insya Allah langsung jadi ketika postingan indx d gugel mas, tpi klau untuk postingan lawas butuh bebrapa hari baru index, bahkan ada postingan lawas saya yang sampe saat ini blm jado breadcrumb nya, tpi untuk postingan baru alhamdulillah udah index smue dgn breadcrumb nya.

@Kon-Blog & all, sama-sama sobat, semoga bermanfaat. happy blogging..

gaptek said...

benar2 hebat, postingan baru memang langsung keindex breadcrumbnya, makasih sobat!!

tetangga sebelah said...

wah, mantap nih, bikin keren blog aja...

Saddam said...

oke sob, mantab, thx udh sharing... :)

Trianandika said...

artikelnya sngt bermanfaat bgi sya bloger newbie...
Visit to my blog: http://kantong-goresan.blogspot.com
Pertanyaan: knpa ya d'stiap blog bnyx bngt link hidup dri pnanya yg d'larang?? Hehe...
Mohon bimbingannya,,,
Tks

Id Bloger said...

wah seep mas udah ane praktekan :)

Unknown said...

thanks sob..kunjungannya

membuat website said...

Saya coba dulu gan caranya, lagi kesulitan nich dalam membuat breadcump...terima kasih infonya.

deny said...

sangat mmbantu gan thanks

i Post said...

mantabh bro ane coba dulu yag

d7own said...

manft bgt nh gan..
Thx infox..
Sks trs..
d tngg knjgnxx..

nakusan computer said...

nice infonya gan...
ane praktekin dulu.

Arif Fuady said...

thanks triknya mas .. jalan2 dong, jembatanqolbu.blogspot.com

gaptekers said...

iji coba gan, punya ane belum pasang breadcrumb soalnya

Unknown said...

akhirnya ketemu juga deh, terima kasih mas...

belajar said...

ini baru tutorial yang mantap...udah keliling-keliling google ane coba semua gak berhasil...terakhir ni aku coba sukses sob..mantapp.....! thanks

Putupunyablog said...

saya sudah praktekin gan ternyata sudah berhasil. tapi hasil pencarian di google malah ada "Judul artikel| Blog*Spot" trus bagaimana cara mengganti "Blog*spot" dengan nama blog kita sendiri gan? mohon pencerahannya gan. Trimakasih.

Anonymous said...

nice info,,thnks gan,,salam persahabatan ya

Unknown said...

gak semua template blog bisa ya ? saya gk tampil :(

uponsel said...

mantapp Bisa gannn :)


thx

kangfata said...

manngtaap... berangkat ke tkp langsung di aplikasi. thanks

Anonymous said...

selalu ada yang baru untuk ilmu SEO,,,mantabs

M Rizal said...

Nice Artikel Bro sudah saya Pratekkann.. :D

Syifa Rent Car said...

tks om infonya

makasih banget, sangat membantu saya

sukses selalu

Unknown said...

Terima kasih atas artikelnya.
Oh iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya Anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi Anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada Waktu saya akan berkunjung lagi.

Ditunggu kunjungan baliknya :)


#Semoga sehat selalu :)

Unknown said...

kok di blog saya nggak bisa ya gan ?? apa nggak semua template bisa ya ?

Followers