Menu/Navigasi Breadcrumbs yakni navigasi yang berada di potongan atas posting dan mengobrol urutan isi halaman dari rootnya (Home) hingga ke posting/artikel.
Menu ini sering dijumpai di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga sanggup melakukan hack navigasi breadcrumbs dengan menurut pada label: Home > Label > Posting. Menu ini akan timbul pada halaman posting, label, arsip, dan tidak timbul di potongan homepage.
Menu/navigasi breadcrumbs juga menolong mengembangkan SEO dan SERP, yakni dalam pemetaan oleh search engine dan juga memperbesar kepadatan keyword, mengingat letaknya yang berada di potongan 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 hukum 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 sudah di-copy dan ditaruh dengan benar, kemudian save.
note: sebab banyaknya dilema yang disampaikan dikala mengedit, amati sungguh-sungguh instruksinya serta ketahui perumpamaan di bawah/setelah serta di atas/sebelum, itu bermakna letakkan kode sungguh-sungguh sesudah atau sebelum kode yang dicari. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, bila anda mesti memasukkan tag/kode gres di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda mesti menaruh benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag gres disisipkan di antara keduanya, jadinya:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/><data:adStart/>
Enjoy menu breadcrumbs gres di Blog Blogger/Blogspot-mu!
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com
