Cara Membuat Menu Navigasi Breadcrumbs

Written by RA_Syihan on Tuesday, November 02, 2010 | Category: Tips, Trick, Tutorial

255 Votes

Navigasi seperti di atas lebih di kenal dengan nama “breadcrumb”. Dengan adanya “breadcrumb” maka pembaca dapat dengan mudah melihat posisi artikel yang sedang di baca serta pembaca dapat mencari artikel dalam satu kategori yang berkaitan dengan posting.

Untuk membuatnya, caranya cukup mudah, sobat ikuti trik dibawah ini :

1. Silahkan login ke blogger.

2. Klik Rancangan>>Edit HTML

3. Click Download Full Template (untuk berjaga-jaga).

4. Silahkan beri tanda centang Expand Template Widget.

5. Silahkan cari kode ]]></b:skin>

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

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

7. Silahkan cari kode berikut pada template sobat :

<div class='post hentry uncustomized-post-template'>

8. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

9. Klik tombol Save Template dan lihat hasilnya :D

sumber