Cara Membuat Menu Navigasi Breadcramb

Cara Membuat Menu Navigasi Breadcramb - Assalamualaikum sobat blogger. Setelah beberapa hari gak posting karena berbagai kesibukan perkuliahan, hari ini saya kembali mentempatkan waktu untuk sekedar menulis coretan tentang Tips dan Trik Blogger yang saya harapkan bisa bermanfaat bagi sobat semua. Sebelumnya saya juga telah memposting artikel tentang Cara Membuat Kotak Komentar Admin Berbeda.

Nah di postingan kali ini saya akan membahas tentang Cara Membuat Menu Navigasi Breadcramb. Saya yakin sobat sudah pasti tahu tentang menu ini. Ya, menu ini biasanya terdapat diatas postingan yang berfungsi sebagai menu navigasi agar pengunjung mengetahui artikel tersebut berada dibagian mana blog.

Untuk lebih jelasnya, silahkan lihat contohnya dibawah ini:

Baiklah, untuk membuat menu navigasi breadcramb ini cukup mudah. Silahkan ikuti langkah-langkah berikut ini:

• Login ke akun blogger sobat.
• Langsung ke menu Template.
• Pilih Edit HTML
• Jangan lupa centang Expand Widget Template.
• Cari kode ]]></b:skin>, kemudian letakkan kode berikut ini tepat diatas kode ]]></b:skin>

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

• Kemudian cari lagi kode ini <b:include data='top' name='status-message'/>, lalu letakkan kode dibawah ini tepat dibawah kode <b:include data='top' name='status-message'/>

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

• Setelah itu cari lagi kode ini <b:includable id='main' var='top'> lalu letakkan lagi kode dibawah ini tepat diatas kode <b:includable id='main' var='top'>

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

• Kemudian save template sobat.

Nah, gampangkan? sekian dulu postingan saya tentang Cara Membuat Menu Navigasi Breadcramb. Semoga bermanfaat bagi sobat sekalian.