Di sini saya akann membahas tentang bagaiman Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot.
Tapi sebelum itu Add dulu ya Facebook aku.
Add My Facebook
Tapi sebelum itu Add dulu ya Facebook aku.
Add My Facebook
navigasi yang berada di bagian atas posting
dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke
posting/artikel.
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.
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.
0 comments:
Post a Comment