Membuat Breadcrumb Navigation Pada Blog

Breadcrumb Navigation adalah deretan navigasi sederhana yang terletak diatas judul artikel yang sedang dibaca pengunjung. Dengan adanya Breadcrumbs Navigation pengunjung menjadi mudah melihat kategori artikel yang sedang dibaca dan dengan mudah bisa mencari artikel lain dengan kategori yang sama dengan cara melakukan klik pada Breadcrumb Navigation tersebut. Selain untuk memudahkan pengunjung melihat dan mencari artikel berdasarkan kategori juga merupakan teknik SEO untuk mendongkrak SERP pada mesin pencari

Untuk Membuat Breadcrumb Navigation Pada Blog sangatlah mudah,, kita hanya perlu menambahkan beberapa kode ke dalam edit HTML template blog. Dengan begitu blog kita sudah memiliki Breadcrumb Navigation. Untuk Membuat Breadcrumb Navigaton Pada Blog anda lakukanlah cara berikut : 

1. Login pada account blogger anda
2. Pada halaman dasbor pilih Tata Letak kemudian Edit HTML dan jangan lupa centang kotak kecil disamping Expand widget template
3.  Letakkan kode dibawah ini persis diatas kode ]]></b:skin> 

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

4. Selanjutnya carilah kode <div class='post hentry uncustomized-post-template'> pada halaman edit html template blog kemudian masukkan kode dibawah ini setelah kode tersebut.

<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' 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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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>

5. Simpan Template

Jika cara diatas telah dipraktekkan dengan benar lihat hasilnya pada blog anda dengan cara masuk ke salah satu halaman posting blog kemudian lihat diatas judulnya maka Breadcrumb Navigation sudah tampil pada blog anda. Mudah-mudahan dengan adanya Breadcrumb Navigation Pada Blog bisa meningkatkan SERP blog pada mesin pencari. Sebagai contoh lihatlah gambar dibawah ini yang merupakan Breadcrumb Navigation Blog Zona Klik.





Postingan Terkait Lainnya :


Banner Float Ads

 

W3 Directory - the World Wide Web Directory My Zimbio Marketing / SEO ping.sg - the community meta blog for singapore bloggers Ping your blog, website, or RSS feed for Free
Prediksi Sepakbola Terbaru, Video Sepakbola, Liga Champions, Liga Inggris, Liga Italia, Liga Indonesia, Sea Games XXVI 2011, Euro 2012, Piala Dunia 2014, MotoGP
Tips SEO, Blogspot, WordPress, Facebook, Twitter, Bisnis Online, Google AdSense, Joomla, Drupal