MEMBUAT BREADCRUMBS BLOGSPOT

Sinichinet kali ini akan berbagi postingan tentang cara MEMBUAT BREADCRUMBS BLOGSPOT. Jika ada yang belum mengetahui apa itu Breadcrumbs yaitu suatu menu navigasi yang memberikan link dari satu halaman ke halaman berikutnya yang sedang aktif atau dari halaman utama (Home) menuju ke halaman yang sedang anda baca. utk lebih jelasnya bisa anda lihat pada screenshot berikut :

Jika anda perhatikan biasanya Breadcrumbs terdapat diatas judul. Melalui Breadcrumbs ini pembaca bisa mengetahui dimana postingan yang sedang dia baca berada. Selain itu, menurut para master SEO, Breadcrumbs sangat baik untuk SEO blog karena bisa memperkaya kata kunci dalam postingan.

Perhatian : Sebelum mencobanya alangkah lebih baik jika anda membuat backup terlebih dahulu untuk berjaga-jaga.

Cara membuat Breadcrumbs adalah sebagai berikut :

Masuk ke Blogger

Klik Template > Edit HTML > Lanjutkan

Centang Expand Template Widget

Cari kode ]]></b:skin> dan simpan kode ini diatasnya:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Cari kode <<b:includable id='main' var='top'>, ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>

Simpan Template anda

Demikian cara MEMBUAT BREADCRUMBS BLOGSPOT dan semoga bermanfaat ^_^b

Sumber referensi : Blog Kangismet

Baca juga artikel yang lain :