Cara Membuat Breadcrumb Navigation di Blog

Fungsi atau manfaat dari Breadcrumb Navigation ini besar sekali,  dengan terpasangnya template ini akan sangat membantu dan memudahkan pengunjung blog kita untuk mengetahui posisi postingan artikel kita berada. Posisi Breadcrumb Navigation  ini letaknya tepat diatas postingan kita, lihat urut-urutannya  Home >> Nama Label >> Judul Postingan. Tidak ada salahnya apabila blog sobat di pasang template Breadrumb Navigation, dan sobat tidak akan rugi bila memasangnya malah akan mendatangkan manfaat besar terhadap blog sobat dengan banjirnya pengunjung blog.

Apabila sobat berminat ingin pasang, ikuti saja cara dan langkah di bawah ini:
Note: sebaiknya back-up dulu template sobat di  unduh template lengkap untuk menghindari kegagalan / kesalahan dalam pemasangan kode - dan anda tinggal meng_unggah kembali template backup tadi

• Login / Masuk ke akun blogger sobat.
• Masuk ke menu Template.
• Pilih dan klik edit html.
• Carilah kode   ]]></b:skin>  untuk mempermudah pencarian gunakan Ctrl F
• Setelah ketemu kode tadi,  copy_kan kode CSS di bawah ini dan paste_kan tepat di atas kode ]]></b:skin>

  

         .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

• Selanjutnya cari kode  <b:includable id='main' var='top'> apabila sudah ketemu dengan kode itu. Ganti kode tersebut dengan kode 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'/>

• Kemudian Save / Simpan Template.

Untuk melihat hasil dari pemasangan kode tadi silahkan sobat tunggu antara 1 - 2 hari,  yang pasti breadcrumb sobat akan tampil di hasil pencarian Google.  Pengalaman blog saya membutuhkan waktu sekitar 1 hari untuk melihat tampilan breadcrumb.

Semoga bermanfaat.