Cara membuat Breadcrumbs untuk Blogger

Cara membuat Breadcrumbs untuk Blogger

Posted by R-Library at Saturday, December 08, 2012 | Saturday, December 8, 2012 | 4 comments

Hello, Librarian, kali ini saya akan membahas tentang Tutorial Blog, pertama saya akan membahas Breadcrumbs, apa itu Breadcrumbs? Breadcrumbs adalah navigasi menu untuk memudahkan Pengunjung/Visitor Web/Blog melacak lokasi dalam dokumen dan kembali ke Homepage dengan Mudah dan juga supaya terindeks oleh Google atau Mesin Pencari lainnya lho. Lumayan kan buat bikin Blog-nya Librarian tambah terkenal? Hehehe..

Ini lah Contoh Breadcrumbs.

Okay,, kita langsung aja deh kecara-nya, dari pada kebanyakan Cingcong, ntar malah gak jadi lagi.. Hehehe.. Okay, let's go..

• Pertama, Selalu dan selalu Login ke Blogger, dan buka tab Template > Edit HTML
• Kedua, Klik Proceed dan Centang Expand Widget Templates
• Ketiga, tekan CTRL + F di keyboard, lalu cari code <b:if cond='data:post.title'> dan Copy-kan Code berikut tepat di bawah <b:if cond='data:post.title'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

• Selesai? Masih ada lagi nih, Tekan CTRL + F di keyboard lagi, lalu cari code ]]></b:skin>. Lalu copy-kan code berikut tepat di atas ]]></b:skin>.

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

• Got it? Sekarang Klik Save Template dan Lihat Hasil nya.. VOILA!! Jadi deh..

Gimana? Mudah kan? Terima kasih kepada Hermanblog atas Script nya.. :D

Source : http://ralfar-library.blogspot.com/2012/12/cara-membuat-breadcrumbs-untuk-blogger.html#ixzz2LvqMZsaQ