Membuat menu Breadcrumb Navigasi

breadcrumb ,membuat breadcrumb navigasi








Apa sih breadcrumb navigasi itu ? breadcrumb navigasi adala sebuah menu navigasi yang menyatakan tempat atau kategori atau label dari sebuah artikel.Pada contoh menu breadcrumb disamping dimana menunjukkan kalau artikel yang berjudul Pengaturan blog agar SEO friendly dapat ditemukan di Home dengan kategori tips SEO dan trik blogger.Dengan breadcrumb selain berfungsi memberitahu informasi tempat kategori sebuah artikel juga bisa mempercantik tampilan blog kita.Oleh karena itulah menu navigasi ini cukup SEO friendly juga menurut saya.Baiklah,sekarang saya ingin menjelaskan bagaimana membuat navigasi breadcrumb.

1. Masuk ke akun blogger anda
2. Lalu pilih menu layout >> edit html
3. Sebelumnya download full template,untuk mengantisipasi terjadinya kesalahan.
4. Beri tanda cawang pada Expand Template widget.
5. Cari kode ]]></b:skin> tekan F3 agar lebih cepat.
5. Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
6.kemudian cari kode <div class='post hentry uncustomized-post-template'> kemudian copy paste kode dibawah ini persis dibawah kode tersebut.

<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'>Home</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>

7. Save template dan selesai
8. Selamat mencoba.

 

Copyright (c) 2010 oleh Blog Monitize|powered by blogger