Memasang Breadcrumb di Blogspot - Blogger
Navigasi breadcrumb atau breadcrumb navigation adalah sebaris link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca. Contohnya: Browse » Home » SEO » Membuat Navigasi Breadcrumb Blogspot. Silahkan melihat [Demo Breadcrumb Navigation]
Saya tertarik dengan breadcrumb yang tertulis pada Google's Search Engine Optimization Starter Guide. Karena google mengatakan demikian dan saya masih menjadi penggunanya hingga saat ini, maka dengan senang hati saya praktekkan. Setelah mencari dan mencari akhirnya ketemu juga cara membuat navigasi breadcrumb untuk blogspot pada tulisan Kang Rohman How To Make "Breadcrumb-Navigation" In Blogger. Untuk lebih mudahnya apa itu breadcrumb silahkan melihat gambar berikut:
Breadcrumb Navigaton Bang Del
Ikuti langkah berikut:
1. Login blogger dengan ID kamu » 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 kebor 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 kamu
<div class='post hentry uncustomized-post-template'>
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 == "item"'>
<div class='breadcrumbs'>
Browse » <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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » 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>
4. Klik Simpan Template dan tunggulah beberapa saat hingga selesai.
5. Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.
6. Selesai.
