Cara Memasang Widget Navigasi Breadcrumb di Blogger

Navigasi Breadcrumb adalah sebaris tautan link internal pada bagian atas atau bawah halaman yang dapat memudahkan para pengunjung untuk kembali pada bagian sebelumnya. Seperti tombol Next-Back pada Firefox atau yang lainya, jadi misalkan kita masih ingin melihat postingan sebelumnya tinggal klik pada bagian sebelumnya. Contoh : Home > Blogging > Navigasi Breadcrumb.

Saya tertarik dengan breadcrumb yang tertulis pada Google's Search Engine Optimization Starter Guide. Oleh sebab itu saya juga memakainya. Ikuti langkah berikut untuk membautnya :

1.      Login ke Blogger anda » Klik Tata Letak » Edit HTML » beri tanda centang pada Expand Template Widget » Download Template Lengkap untuk mem-backup template blog.

2.      Carilah kode ]]></b:skin> agar lebih mudah tekan Ctrl+F atau F3 maka akan muncul tools pencarian (mozilla). Copy dan paste kode di bawah ini tepat di atas kode tadi :

breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

3.       Carilah kode berikut pada template anda :

<div class='post hentry'>

4.      Copy dan paste kode berikut tepat di bawah kode tadi :

<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' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

5.       Klik Save Templates dan tunggu beberapa saat hingga selesai.

6.       Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.

sumber 

• Tweet
• Share
• Share