Membuat Breadcrumbs, Navigasi Blog, di Atas Halaman Posting

sumber gambar : www.intuit.com

Breadcrumbs merupakan navigasi yang berfungsi untuk menunjukkan dimana Anda sebagai pembaca sedang berada ketika mengunjungi sebuah website/blog. Pastinya, hal ini akan membuat pembaca tidak kebingungan ketika sedang membaca suatu artikel, tetapi dia tidak tahu sedang berada dalam kategori apa di website tersebut. Selain itu, breadcrumbs juga membantu sebuah blog/website agar lebih SEO friendly. Pada blog, biasanya breadcrumbs ditampilkan dalam bentuk seperti di bawah ini :

Home >> Label1 >> Label2 >> Label ... >> Judul Post

Untuk membuatnya, ikuti langkah berikut :

1. Login ke blogger, lalu masuk Template.

2. Klik di daerah mana saja pada frame (kotak kode) template, lalu tekan Ctrl + F hingga muncul kotak pencarian di pojok kanan atas frame. Lihat gambar di bawah ini.

3. Cari kode berikut ]]></b:skin>.Lalu letakkan kode ini di atasnya.

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

4. Lalu, cari kode <b:includable id='main' var='top'> dan 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'/>

5. Keterangan nomor 3 untuk kode berwarna HIJAU :

padding : silakan ganti sesuai ukuran yang Anda inginkan. 0px 5px 5px 0px artinya 'atas 0px, kanan 5px, bawah 5px, kiri 0px'.
margin : silakan juga jika ingin diganti nilainya
font-size : ukuran font, bisa Anda ganti
color : warna font, untuk melihat kode warna yang lain, silakan buka Colorhexa, Anda bisa mencarinya di sana
border-bottom : garis di bawah breadcrumbs. Jika ingin diubah, ganti 1px dengan angka yang Anda inginkan, ganti dotted dengan jenis border yang diinginkan (kode silakan cari di search engine), ganti #bbb dengan kode warna yang Anda inginkan untuk merubah warna border (kode bisa dilihat di Colorhexa).