Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot

Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. 

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada
halaman posting, label, arsip, dan tidak muncul di bagian homepage.

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting. 

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.

2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:

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

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:

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

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya:

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

5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:

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

Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:

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

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

<data:adStart/>

Judul: Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terima Kasih Atas Kunjungan Anda...

Klik tombol "Like" atau "Suka" bila Anda suka dengan artikel ini. Jangan lupa poskan komentar agar saya dapat berkunjung balik ke blog Anda. Jika Anda ingin membaca artikel lain dari blog ini, maka silakan klik di sini untuk membuka daftar isi. Harap menyertakan dan mencantumkan http://ayibagus-spc.blogspot.com/2012/07/cara-membuat-menunavigasi-breadcrumbs.html bila Anda menyalin dan atau meng-copy artikel ini, dengan menggunakan kode di bawah ini. Terimakasih.

Terima kasih Sudah berkunjung
<a href="http://ayibagus-spc.blogspot.com/2012/07/cara-membuat-menunavigasi-breadcrumbs.html">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>

Ditulis Oleh : Unknown Blogger Indonesia Tetap Kunjungi

Artikel Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot ini diposting oleh Unknown Pada Hari Senin, 23 Juli 2012. Terima Kasih atas kunjungan sahabat kesini. Semoga sobat dapat berkenan untuk sedikit memberikan sekelumit komentar mengenai postingan kali ini.

:: Home ! ::

TERIMA KASIH SUDAH BERKUNJUNG, JANGAN LUPA BERLANGGANAN DI BLOGGER SPC, DAN JANGAN LUPA FOLLOW, SUKA BLOGGER SPC INI, SAYA UCAPKAN SEKALI LAGI TERIMA KASIH

Desain Blog Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot Memahami Karakteristik dan Cara Optimalkan Label Blogger Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List) Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger Cara Memasang Fitur Blogger Star Rating di Posting Blog Cara Pasang Widget Sharing Is Caring/Sexy di Blogger

ayib adam al-mahjub - 02.47