Share the ideas and innovations to a friend of the world

Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan

Blogger.pngKesempatan ini saya akan memberikan trik dan cara mempercantik blog-blog sahabat blogger. Contohnya dengan memberikan navigasi breadcrumb , memberikan navigasi breadcrumb pada blogspot akan terlihat lebih menarik dan profesional . Navigasi ini berfungsi untuk memudahkan pengunjung yang datang ke blog sobat untuk menemukan artikel yang ingin di carinya, Navigasi ini juga dilengkapi link Home dapat mempermudah untuk kembali ke halaman depan. Contohnya adalah Home >> Blog >> Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan atau sobat bisa lihat contohnya terdapat diatas judul artikel ini.

Cara buatnya lihat langkah-langkah dibawah :

  • Login ke akun blog sobat klik disini
  • Ke Menu Rancangan
  • Pilih Edit HTML
  • Jangan lupa berikan Centang pada Expand Widget Templates
  • Cari code ]]> (gunakan CTRL+F untuk memudahkan mencari)
  • Silahkan copy paste code dibawah dan letakkan di atas code ]]>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:80%; line-height:1.4em; border-bottom:4px double #cadaef}
  • Cari kode berikut <div'post hentry uncustomized-post-template'> , jika tidak mendapatkan kode ini anda bisa menggunakan kode pencarian dengan <div'post hentry (gunakan CTRL+F untuk pencarian)
  • Letakkan kode dibawah, tepat dibawah kode <div'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'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>
  • Save Template
  • Akhirnya selesai
Anda baru saja membaca artikel yang berkategori Blog dengan judul Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan. Anda bisa bookmark halaman ini dengan URL http://ilmu27.blogspot.com/2011/09/cara-membuat-navigasi-breadcrumb-diatas.html. Terima kasih!
Ditulis oleh: Imran -

2 komentar untuk "Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan"