Membuat Tampilan Breadcrumbs di Blog

Mungkin kalian sudah pada tau kan tentang breadcrumbs dan apa kegunaan breadcrumb, dan saya yakin dan saya jamin pasti masih banyak teman-teman blogger yang belum tau penjelasan tentang breadcrum di Blog dan tujuan nya buat apa. Manfaat breadcrumbs buat apa sih? kalau menurut saya pribadi manfaat breadcrumbs banyak salah satunya memudahkan mesih pencarian google mengindeks artikel di blog kita.
OK langsung aja cara membuat nya ya.

Masuk ke akun blogger anda.
Pilih tab menu Template
Jangan lupa ungah dulu Template anda sebelum memulai, klik tab cadangkan/pulihkan
kalau sudah msuk ke kotak kode HTML klik Edit HTML
Bukak dulu semua kode nya klik di sembarang di dalam kotak kode HTML tersebut. tekan ctrl+A, ctrl+C, trus Ctrl+Del di keyboard anda. kalau semuannya kotak HTML nya sudah kosong sobat paste kan kembali kode yang sudah di copy tadi ke dalam kotak edit html nya
cari kode ]]></b:skin dengan cara tekan ctrl+F di dalam kotak html sembarang tempat.
kalau sudah ketemu letakkan kode dibawah ini 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;}

selanjutnya cari kode seperti dibawah ini:

<b:includable id='main' var='top'>

ganti kode seperti di atas <b:includable id='main' var='top'> dengan kode seperti dibawah 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'/>

Klik simpan template. mudah mudahan sukses dan berhasil ya. kalau berhasil tampilan akan seperti contoh gambar blog saya dibawah in.

Sudah dulu ya mudah-mudahan bisa bermanfaat. kalau ada yang mau membuat atau menampilkan kode HTML dalam bentuk bingkai seperti tampilan kode Html di atas  silakan anda kunjungi artikel saya yang lain CARA MEMBUAT BINGKAI UNTUK POSTING KODE HTML.

Terima kasih sudah mau berkunjung ke blog saya, jangan lupa tinggalkan komentar dan Follow ya. ^_^