Membuat Navigasi Breadcrumb di Blogspot

Bagaimana cara membuat Navigasi Breadcrumb ? Sebenarnya telah banyak yang membuat tutorial cara membuat navigasi breadcrumb, baik di wordpress maupun di blogspot. Kali ini tutorial cara pasang breadcrumb di blogspot agak berbeda dari yang sudah-sudah. Berikut ini adalah cara membuat breadcrumb di blogspot.com

1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

8. Setelah itu silahkan cari kode berikut pada template anda :

<b:includable id='post' var='post'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <b:includable id='post' var='post'>

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Belajar Saraf</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> 

<a expr:href='data:label.url' rel='tag'><data:label.name/></a> 

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> 

</b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

10. Simpan/save dan silahkan lihat hasilnya secara langsung di atas judul postingan

Style template seperti ini akan menambah seo friendly sebuah template dan semoga akan semakin meningkatkan serp anda dalam search engine. Semoga berhasil.

Postingan yang Bersenggama