Cara membuat breadcrumb pada blogspot

Sebelum masuk ke cara membuat breadcrumb pada blogspot baiknya anda mengetahui definisi dan fungsi dari Breadcrumb tersebut. Breadcrumb adalah sebuah navigasi menu horizontal pada sebuah blog yang biasanya berada pada posisi atas blog di bawah judul atau header blog dan berfungsi mempermudah bagi pengunjung untuk mengetahui sedang berada di halaman mana berada dan memudahkan ketika akan kembali ke menu sebelumnya.

Membuat breadcrumb pada sebuah blog sepertinya sesuatu yang wajib diadakan, kenapa? karena selain dari fungsi di atas, sama halnya seperti sitemap, breadcrumb juga sangat baik bagi SEO blog karena akan memperkaya kata kunci dalam postingan.

Bagi anda yang memakai template bawaan blogger breadcrumb ini tidak disediakan dan anda harus menginstalnya sendiri. Tetapi untuk template-template gratisan dari penyedia template yang banyak beredar terkadang fungsi breadcrumb ini sudah terpasang otomatis. 

Nah sekarang bagaimana cara membuat breadcrumb pada blogspot? Gampang sekali kok ^_^, caranya adalah:

1.      Log in ke blogger

2.      Masuk ke rancangan >  Edit HTML > centang “Expand Template Widget”

3.      Untuk amannya adan download dulu templatenya sebagai antisipasi apabila ada kesalahan.

4.      Dengan CTRL F cara kode ]]></b:skin>

5.      Copy kode dibawah ini dan paste tepat diatas kode  ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

6.   Kemudian copy kode dibawah ini dan paste tepat dibawah kode <div class='post hentry'> atau cari kode ini <b:includable id='post' var='post'> Paste kode dibawah tepat dibawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#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>

7.    Selesai. Simpan dam lihat hasilnya dengan mengklik salah satu postingan.

Bagaimana mudah bukan cara memasang breadcrumb pada blogspot? Selamat mencoba.

Artikel Terkait:

Modifikasi blog

• Cara menghilangkan Judul Blog di header
• Membuat tulisan berjalan marquee blogspot
• Mengenal dan menulis kode HTML blog
• Membuat menu drop down blogspot –Bagian2
• Membuat menu dropdown di blogspot - bagian 1
• Cara membuat efek daun berjatuhan pada blog
• Cara mempercantik blogspot
• Keuntungan mengganti domain blogspot dengan domain sendiri
• Cara memasang widget twitter blogspot
• 8 situs background blogspot terbaik dan gratis untuk Web Designers
• Cara mengganti template blogspot
• Cara membuat Energy Saving Mode pada blogspot
• cara mengganti kursor blog
• Membuat header blog dengan gambar
• Cara membuat efek salju di blog
• cara membuat share box di blogspot- blogger blog anda
• Cara Menghilangkan Navbar Blogspot
• 4 Cara mempercantik blogspot dengan widget
• Cara membuat buku tamu di blogspot
• Cara Mengganti Favicon blog

SEO Blogspot

• Belajar Trik SEO untuk yang tidak tahu SEO
• Cara Menulis Artikel SEO Friendly
• Belajar Teknik SEO Dasar Untuk Pemula
• Apa Itu SEO Dan Apa Pentingnya Bagi Sebuah Bisnis Online
• Memaksimalkan fitur SEO on page Blogger
• Membuat sitemap blogger
• Jasa maintenance blog-website
• Blog seo on page versi Google panda
• Trik SEO Blogspot pada blog baru