Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan - Internet Beritaku

Rabu, 21 September 2011

Cara Membuat Navigasi Breadcrumb Diatas Judul Postingan


Kesempatan 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
Comments

2 komentar


EmoticonEmoticon