Cara Membuat menu Breadcrumb di blogspot

Cara Membuat menu Breadcrumb di blogspot

S udah pada tahu kan, apa itu menu breadcrumb? Ayo, ayo pasti sudah pada tahu.karena kata breadcrumb ini sudah tidak asing lagi dikalangan telinga para blogger ketika setiap kali kita mendengar kata breadcrumb ini. Betul banget sob, itu lho menu yang tampil tepat diatas judul postingan/ artikel . dan sekarang ini tepat hari ini dan detik ini juga aku akan coba share cara pembuatan menu breadcrumb ini kehadapan sobat semua, dan sudah barang tentu menu breadcrumb ini sudah seo dan akan terindeks oleh google mesin pencarian.

Namun sebelum berlanjut kedalam tata cara pembuatannya,terlebih dahulu aku akan menuliskan masing-masing kode scripnya. Dimana script ini terbagi menjadi dua, yakni CCS dan HTML.

Untuk kode CCS berikut kodenya:

.breadcrumbs{padding:0 0px 15px 0; margin:0; font-size:95%; line-height:1.4em;}

Dan untuk script HTML kodenya seperti berikut:

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/>

Kini tibalah kita pada langkah selanjutnya, yaitu tata cara pemasangannya kedalam template blog.

Cara Membuat menu Breadcrumb di blogspot

1. Login kedalam dasbor blog

2. Pilih template. 

3. Pilih edit HTML. untuk menjaga terjadinya error Backup terlebih dahulu template sobat.

4. Cari kode yang mirip seperti berikut ]]></b:skin> dan pastekan kode CCS diatas tepat sebelum kode ]]></b:skin>
5. Masih didalam pengeditan HTML template, sekarang cari lagi kode seperti ini <b:includable id='main' var='top'> jika sudah menemukannya, ganti/hapus kode tersebut dengan kode HTML yang ada di atas. 

Tips: agar lebih mudah dalam melakukan pencarian kode , tekan tombol ctrl +f kemudian masukann kode yang sedang anda cari tersebut. 

6. Pilih simpan template dan selesai.

Untuk melihat hasil kerja yang baru saja sobat selesaikan ini silahkan buka salah satu judul postingan sobat, Taddaaaaa….. maka menu breadcrumb kini sudah terpasang tepat diatas judul postingan artikel sobat. Nah, dengan demikian maka usai sudah tutorial cara membuat menu breadcrumb di blogspot kali ini, selamat mencoba dan bye-bye…..