Cara Membuat “breadcrumb-navigation” pada Blogger

Tahukah kalian apa itu “breadcrumb-navigation” ...??
ok, klo kmu tidak tahu, silahkan buka : www.elite-mantab.web.id dan www.x4punya.blogspot.com
Maka di situ akan ada navigasi sederhana yang berupa teks, tetapi, hal itu hanya bisa pada sebuah website, untuk www.elite-mantab.web.id adalah website dan www.x4punya.blogspot.com adalah sebuah Blogspot, nah pada blogspot ini kita bisa tambahi “breadcrumb-navigation” juga, .
untuk lebih jelasnya lagi, silahkan lihat gambar dibawah ini :


Nah, Navigasi di ataslah yang di sebut dengan namanya “breadcrumb-navigation”, dari situ, sang pembaca bisa melihat posisi artikel yang sedang di baca.

Oke deh, g usah kebanyakan omong, langsung aja kita mulai acaranya :

1. Login dulu di Blogger kalian
2. Klik Tata letak / Layout
3. Kemudian klik Edit HTML
4. Untuk antisipasi kegagalan, download template kamu terlebih dahulu, klik Download Template Lengkap

5. klik / beri tanda centang di tulisan Expand Template Widget.
6. Dan kemudian cari code : ]]></b:skin>
7. kemudian letakkan kode dibawah ini tepad berada di atasnya : ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

8. Kemudian cari code ini : <div class='post hentry uncustomized-post-template'>
9. kemudian letakkan code ini tepat di bawahnya

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Kemudian klik save, dan lihat hasilnya dengan cara klik salah satu judul artikel anda....

gimana? bisa kah?

Semoga bermanfaat.....

Posted in: Tutorial Blog