Bagaimana Cara Memasang Breadcrumb di Blog

17 comments
Bagaimana Membuat Breadcrumb pada Blog, supaya breadcrumb tersebut tampil untuk setiap posting artikel Anda. Sebetulnya cara memasangnya tidak terlalu sulit. Fungsi breadcrumb ini termasuk salah satu Tips SEO juga. Karena menurut pembahasan, teknik pemasangan breadcrumb di blog ini, akan mempengaruhi mesin pencari supaya lebih cepat dalam mengenali struktur setiap blog yang dikunjunginya.

Selain itu, pemasangan breadcrumb ini juga merupakan salah satu teknik membuat link antar halaman, sehingga halaman yang satu dengan halaman yang lain dapat saling terhubung. Tentu saja dengan begitu akan memberikan efek yang sangat baik terhadap pagerank blog.

breadcrumb

Nah, untuk memasang breadcrumb ini silahkan Anda ikuti caranya sebagai berikut;
  • Pertama Login ke akun Blogger Anda.
  • Lalu klik menu Template
  • Lakukan backup template terlebih dahulu, untuk menjaga jika terjadi kesalahan pada saat menambahkan kode.
  • Jika sudak di backup silahkan Anda klik Edit HTML
  • Lalu klik Format Template
  • Cari kode ]]></b:skin
  • Kemudian letakkan kode di bawah tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  • Lalu cari lagi kode di bawah ini:
<b:includable id='main' var='top'>
  • Sekarang Anda ganti kode di atas tadi dengan kode yang ada di bawah ini
<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 -->
<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 page and search pages.. -->
<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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

  • Jika sudah kemudian klik Simpan Perubahan. Apabila tahap yang Anda lakukan sudah sesuai dengan yang saya jelaskan diatas, maka Breadcrumb seharusnya sudah terlihat seperti contoh pada gambar dibawah ini.
memasang breadcrumb

Demikian bagaimana cara memasang breadcrumb pada blog Anda. Tidak terlalu sulit bukan. Itulah posting saya dalam kesempatan ini. Semoga artikel ini ada manfaatnya, dan bisa membantu bagi blogger pemula, karena siapa mengetahui mungkin masih ada yang belum paham mengenai bagaimana cara memasang breadcrumb ini. Terimakasih telah berkunjung ke blog ini.

17 komentar

Saya perhatikan artikel ini tidak ada breadcrumbnya di halaman Google. Sayang sekali karena sudah 1 bulan artikel ini diposting tapi belum muncul navigasi breadcrumbnya di sistem indeks Google search engine.Menurut saya pasti ada yang salah dengan breadcrumb di blog ini. Saya lihat pemisah dua label pada breadcrumb di atas judul artikel ini adalah koma. Seharusnya dua label dipisahkan oleh tanda breadcrumb juga. Mungkin itulah masalahnya. Kalau mbak perlu bantuan, mungkin saya bisa membantu untuk megatasinya.

Saya baca satu per satu halaman di blog ini, kok mirip dengan punya mas tama ya...

@oke-Reload
maaf baru buka pos ini, aduh terimakasih banyak atas koreksinya, setelah di lihat kembali betul mas ada kesalahan pada scrip hanya tinggal mengganti tanda (,) dengan (») sebagai tanda breadcumb yang digunakan. Terimakasih telah berkunjung, koreksinya membantu sekali.

@3office
Terimakasih telah membaca satu persatu. Jika merasa blog ini mirip blog lain, mungkin itu materinya saja. Untuk materi mungkin banyak sekali blog yang memuat materi yang sama. Tidak melanggar TOS, yang tidak boleh itu COPY PASTE. Semua narasi bahasa yang ditulis di blog ini, murni tulisan dengan narasi saya sendiri. jika memang ada yang merupakan hasil copy paste, silahkan bisa di cek di www.copyscape.com
Contoh banyak sekali blog yang membuat artikel mengenai cara daftar Google adsense. Tapi tentunya dengan narasi yang berbeda, dan itu tidak dilarang, selama bukan copas. Terimakasih telah berkunjung, dan terimakasih atas komentarnya.

@free website
Sama-sama terimakasih sudah berkunjung di blog sederhana ini.

Terimakasih untuk tutorial cara memasang breadcrumnya, dengan cara ini semoga cepat terindex google. Terimakasih ya...

makaseh mz wdh saya coba dan berhasil

Kalo misalnya ada 2 label berantakan ga mba ???
terima kasih.
http://boomberx.blogspot.com

nah ini dia,kalo cara mengganti breadcrum yang dari bawaan template gimana yah ??
http://mr-strawhat.blogspot.com

@Windows Apps
Terimakasih sudah berkunjung.

Penjelasan utk mengganti breadcrum cukup panjang, kalo dijelaskan di komentar ini terlalu panjang. Insyaaloh bila saya sudah ada waktu nanti akan saya buat artikel cara mengganti breadcrumb.

Mohon maaf saya masih sibuk dengan penempatan siswa baru di sekolah tempat saya mengajar, jadi belum sempat update lagi.

@Boomberx
tidak juga, asalkan memasang breadcrumb-nya dengan benar dan breadcrumb yang sudah bisa untuk beberapa label.

@Jaya Prasetya
Sama-sama terimakasih atas kunjungannya.

udah dilaksanakan mb.tapi koq kayak ndak ada perubahan? sebelumnya terimakasih atas penjelasannya

nice sob, ane coba nih
salam kenal

Saya sudah coba terima kasih nih, ngomong2 untuk penggunaan tanda breadcrumbs nya kode yang ini sudah di update belum ya?