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 :

<a href="https://blogoptimized.blogspot.com/2013/01/membuat-menu-navigasi-breadcrumbs-pada-blogger-blogspot.html" target='_blank' title="Blog Optimized | Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot">Membuat Menu Navigasi Breadcrumbs Pada Blogger/Blogspot | Blog Optimized</a>

Apabila ada pertanyaan dan lain-lain silakan berkomentar atau Contact Saya, dan jangan lupa Follow blog ini.
Blog Optimized | Ben Nafi | Share