cara membuat breadcrumb di blogspot

cara membuat breadcrumb di blogspot

hmmm...
breadcrumb itu apa ya teman-teman ?

mungkin buat para master-master blogger tidak asing lagi dengan cara membuat breadcrumb di blogspot. Namun postingan ini saya tujukan untuk yang belum bisa atau belum tahu apa itu breadcrumb. Breadcrumb adalah sebuah navigasi yang dibuat oleh blogger dan webmaster untuk kemudahan pengunjung blog anda untuk mengetahui lokasi halaman pengunjung berada.

bingung ya ?

hehehe

liat aja deh contoh  gambarnya teman dibawah ini...

Sekarang teman-teman pasti sudah mengerti apa itu breadcrumb.

Breadcrumb memberikan kesan blog kita lebih komersil dalam hal desain dan untuk segi manfaatnya, seperti yang sudah saya jelaskan diatas, breadcrumb berguna untuk membantu pengunjung blog anda dalam menjelajahi halaman per halaman blog anda.

Selain itu google merekomendasikan para blogger dan webmaster untuk menggunakan navigasi pintar ini. Jadi jika anda sudah menggunakan breadcrumb di blog atau website anda berarti anda sudah mematuhi kedisiplinan dalam ilmu web design.

aahh panjang ya cuap-cuapnya...

langsung aja deh kita buat breadcrumb agar blog atau website teman-teman lebih terlihat komersil, hehehe

Oke saatnya membuat breadcrumb pada blog anda...

Seperti biasa kita harus masuk halaman DASHBOARD >>> DESIGN >>> EDIT HTML

ini kode css nya teman ...

.breadcrumbs {
padding: 6px 6px 6px 0px;
margin: 0px 0px 16px 0px;
font-size: 86%;
line-height: 1.4em;
border-bottom: 4px double #e6e4e3;}

copy dan paste kode css diatas kode ]]></b:skin>

sekarang anda centang expand widget template lalu cari kode berikut :

<a expr:name='data:post.id'/>

setelah menemukan kode tersebut, copy dan paste kode dibawah ini tepat dibawah kode diatas  
<a expr:name='data:post.id'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &gt;
<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;'> &gt;
</b:if>
</b:loop>
</b:if> &gt; <data:post.title/>
</div>
</b:if> 

oke sudah selesai edit-editnya, save dulu dong template nya...
sekarang waktunya anda melihat perubahan di blog anda...
SELAMAT YA ....