Cara Menambah Breadcrumb di Blogger

Breadcrumb merupakan navigasi menu yang menunjukan lokasi pengunjung pada halaman blog Anda. Hal digunakan untuk membuat website kita lebih user friendly, yang mana pengunjung dapat dengan mudah mengunjungi halaman blog Anda tanpa masalah. Hal ini juga dapat membantu meningkatkan pencarian blog Anda di mesin pencari dengan menambahkan kata kunci ke dalam postingan blog Anda. Contoh jika Anda menulis postingan tentang Cara Install dan Menambah Disqus Di Blogger dan tag dengan nama label Tips Blog akan menciptkan menu navigasi atau jejak di bagian atas judul postingan Anda sebagai berikut :

Setelah memahami apa itu Breadcrumb mari kita lanjutkan dengan menambah Breadcrumbs di Blogger Anda.

Ikuti langkah-langkah berikut :　

• Login ke Akun Blogger Anda - Edit HTML
• Tekan Ctrl+F dan cari kode berikut :

<b:include data='top' name='status-message'/>

• Tambahkan kode berikut tepat setelah kode di atas :

<b:include data='posts' name='breadcrumb'/>

• Langkah selanjutnya cari kode berikut :

<b:includable id='main' var='top'>

• Ganti kode tersebut dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

• Langkah berikutnya memasukan style, Tekan Ctrl+F dan cari kode ini:

]]></b:skin>

• Setelah ditemukan tambahkan kode dibawah ini tepat di atasnya :

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

• Langkah terakhir klik Simpan Template

Setelah melakukan langkah diatas perhatikan pada bagian atas halaman psotingan Anda akan muncul menu navigasi-nya. Jika Anda ingin meningkatkan lalu lintas blog Anda bisa dengan cara mudah seperti Membuat Sitemap Di Blog Anda dan juga Menambah Sitemap di Google Webmaster. Akhir kata semoga artikel ini tidak menyulitkan Anda dan bermanfaat. Salam satu-delapan !