Membuat Breadcrumb Navigasi

Breadcrumbs adalah sebuah link navigasi untuk mengetahui posisi postingan. Breadcrumbs terletak diatas postingan dengan posisi yang mendatar. Breadcrumbs membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Ingin tahu lebih jauh tentang breadcrumbs dan mau mencoba memasangnya di blogger???

1. Login ke blogger
2. Klik Tata Letak dan klik edit HTML
3. Centang Expand Widget Template
4. Cari kode ini: <b:includable id='main' var='top'>
5. Letakan kode dibawah ini sebelum kode di langkah 4.

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

6. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
7. Letakan kode dibawah ini sebelum kode pada langkah 6.

<b:include data='post' name='breadcrumbs'/>

8. Tambahkan kode dibawah ini sebelum kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Posted in: Link,Menu