Cara Pasang Breadcrumb

Cara Pasang Breadcrumb

7 Comments

Posting ini adalah jawaban beberapa pertanyaan kawan-kawan blogger tentang breadcrumb. Walau sebenarnya sudah banyak posting berhubungan dengan breadcrumb, tidak ada salahnya saya ungkap kembali cara pemasangannya. Disamping itu saya akan menjelaskan dua cara pemasangan breadcrumb di blog anda.
Breadcrumb adalah sebuah navigasi mengenai asal artikel yang di klik atau dibuka pengunjung blog kamu. Breadcrumb dapat mengindeks konten atau artikel secara otomatis seperti termasuk dalam kategori atau label apa artikel tersebut dimuat. Kelebihannya dapat memudahkan pengunjung melihat asal konten pada blog anda, indeksi otomatis, dan merupakan salah satu sarana pendukung dari optimalisasi SEO blog anda yang berhubungan dengan artikel. Script iyang digunakan berupa CSS JavaScript ringan, sehingga tidak membebani loading blog anda. Anda tertarik?......silahkan ikuti cara berikut.
cara pasang breadcrumb pertama

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
.breadcrumbs {
border-bottom:1px double #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Selanjutnya masukkan kode berikut di atas kode <b:includable id='main' var='top'>
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
Selanjutnya masukkan kode berikut di atas kode <b:if cond='data:post.dateHeader'>
<b:include data='post' name='breadcrumbs'/>
Selanjutnya klik simpan template
Selesai dan lihat hasilnya

bila cara pertama tidak berhasil anda bisa pilih pemasangan breadcrumb cara kedua

cara pemasangan breadcrumb kedua

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Kemudian pasang kode berikut di bawah kode <div class='post hentry uncustomized-post-template'>
<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>
Selanjutnya klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.