Memasang Breadcrumb di Blog Dengan Mudah Dan Cepat

"Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan".

-definisi google mengenai Breadcumb-

Dari pengertian yang diambil dari Google diatas, jelas kalau Widget Breadcrumb memiliki kelebihan tersendiri yang berhubungan erat dalam urusan seputar SEO Blog pastinya.

preview Breadcrumb

Logika sederhananya seperti ini, semakin mudah navigasi sebuah blog kemungkinan artikel yang dikunjungi oleh Pengunjung akan semakin banyak artinya kemudahan navigasi adalah salah satu faktor yang tidak bisa diabaikan jika ingin meningkatkan page view blog.

Khusus di template ini rencananya widget navigasi ini akan dipasangkan sebagai salah satu widget default selain widget-widget navigasi penting lainnya, Amin...

Jika ingin menggunakan navigasi ini ke template blogspot Anda silahkan ikuti cara memasang Breadcrumb yang saya copy paste mentah-mentah dari Blogger Pluggins, langkahnya adalah sebagai berikut:

Sign in ke akun Blogspot Anda

Pilih layout -> edit html.

Backup/download template Anda sebelum melakukan perubahan.

Beri tanda centang pada Expand the Widget Templates

Cari kode seperti ini :

<b:include data='top' name='status-message'/>

copy kode dibawah ini tepat dibawah kode diatas :

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

Lalu cari kode seperti ini :

<b:includable id='main' var='top'>

dan copy paste kode dibawah ini tepat diatasnya :

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

Yang terakhir, cari kode seperti ini :

]]></b:skin>

Kemudian copy paste kode CSS dibawah ini diatas kode diatas :

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

Tekan tombol "Save/Simpan".

Semoga Berhasil Sob,.

Baca juga yang ini: