Cara Memasang Widget Navigasi Breadcrumb di Blogger

Post by Hori Revens on Tuesday, January 18, 2011 | 12:14 AM


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.


4 Comments:

  • info yang bagus nich...
    semoga bermanfaat juga bwt yang lainnya kawan...

  • Kalau untuk blog wp bagaimana ya kira2 caranya ?
    trims infonya

  • Nice info. Thanks for sharing.

    Asia Poker99 merupakan agen Poker Terpercaya di Indonesia,
    Poker Gampang Menang serta Poker Tanpa Bot akan membuat Anda betah untuk bermain di AsiaPoker 99!

    Daftar, mainkan dan menang!

  • Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .