Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot

Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot
Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot - Menu navigasi ini penting untuk memudahkan pengunjung menelusuri akar-akar dari blog kita sehingga mengetahui secara persis cabang-cabang pembahasan dari artikel-artikel yang kita miliki.
Jika pada platform wordpress setiap menu kategori dapat kita susun agar memiliki peranakan yang cocok sehingga rumusan atau peta suatu blog menjadi jelas.
Berbeda halnya dengan Blogger atau blogspot. Saya tidak tahu pasti yang penting setiap artikel blog kita dapat dikategorikan dalam kategori khusus namun tidak bisa dimasukkan kedalam induk kategori lain. Ini berarti penerapan breadcrumb berbeda fungsinya untuk Wordpress dan Blogger.


Saat ini sudah banyak Blog di blogspot atau blogger yang menggunakan breadcrumb bahkan terindeks Google. Jika sobat ingin mencobanya, berikut caranya :

Cara Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot - How to Create a Menu / Navigation Breadcrumbs in Blogger / Blogspot:
  • Go to the Dashboard > Design > Edit HTML Centang "Expand Widget Templates" di sudut kiri atas.
  • Cari (Ctrl + F) ]]> </b:skin> dan masukkan CSS brikut 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;}
  • Temukan (dengan Ctrl + F lagi) <b:include data='top' name='status-message'/> Tambahkan kode berikut sebelum kode tersebut.
  • <b:include data='posts' name='breadcrumb'/>
  • Cari (Ctrl + F) <b:includable id='main' var='top'> dan tambahkan kode ini di atas kode tersebut:
<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>
  • Periksa apakah sudah benar semua lalu simpan.
Semoga berhasil :)
Terima kasih telah membaca artikel Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot, semoga bermanfaat bagi kita semua.
Jika sobat berminat, silakan sobat Share artikel Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot ini dan jangan lupa untuk mencantumkan link sumbernya :
Apabila ada pertanyaan dan lain-lain silakan berkomentar atau Contact Saya, dan jangan lupa Follow blog ini.
Blog Optimized | Ben Nafi | Share

Artikel Terkait

4 komentar:

Unknown mengatakan...

asik artikel yg sangat bermanfaat..
http://crazycreazy.blogspot.com

rezky mengatakan...

nice tipsnya gan ,,
jngan lupa mmpir ke blog aku yaa ..

http://srezky.blogspot.com

Unknown mengatakan...

Tutorial yang sangat bermanfaat mas, terima kasih telah berbagi

gadis kecil mengatakan...

Terima kasih sudah memberikan kesempatan untuk berkomentar, postingan ini sangat bermanfaat buat saya ;).

obat pembesar penis alami
pelangsing badan herbal
Lowongan Kerja terbaru
Artikel Menarik
Lowongan Kerja Indonesia
Kliknesia
Prediksi Jitu Togel Skor Bola
Info Unik Aneh Menarik
Cerita Dewasa

.............