Memasang Blogger Breadcrumb-Navigation di Blogspot Bagian 1

Tweet

Tutorial membuat navigasi menu breadcrumbs kali ini yang akan saya bahas, karena konon kaatanya para mastah pakar SEO, dengan memasang breadcrumb-navigation di blogger ini bisa meningkatkan SEO dan SERP sebuah blog dimata search engine. Karena mampu menambah kepadatan keyword dimata Search engine seperti Google. breadcrumb-navigation ini juga membantu pengunjung blog kita, untuk mengenal artikel yang sedang dibaca termasuk dalam kategori apa saja. Dengan begitu pengunjung dimudahkan untuk menjelajahi blog kita. Jadi jelas fungsi dan kegunaan dari pemasangan breadcrumb-navigation ini.

Lalu, bagaimana sih bentuknya blogger breadcrumb-navigation yang akan kita pasang di blog kita, dan bagaimana cara memasang breadcrumb-navigation di blogger. Untuk itu perhatikan dan lakukan langkah-langkah membuat breadcrumb-navigation di blogger yang akan saya uraikan dibawah ini.



Perhatikan pada gambar diatas, yang diberi garis merah itulah yang dinamakan breadcrumb-navigation. Sangat memudahkan kita mengenal sebuah artikel, dimana anda sedang membuka artikel "Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia" dengan label/kategori "Seo Contest" jika kita lihat sesuai gambar diatas.

Untuk memasang breadcrumb-navigation di blogger berikut langkah-langkahnya.

Langkah awal adalah dengan login ke akun blogger anda, langsung masuk ke "Edit HTML" dan cari kode ]]></b:skin> kemudian paste kode CSS dibawah ini persis diatasnya. Untuk memudahkan anda dalam pencarian, tekan CTRL+F dan ketikan kode ]]></b:skin>.

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

Setelah kode CSS diatas terpasang, silahkan simpan template anda. Masih diarea "Edit HTML" centang pada "Expand Widget Templates", seperti gambar dibawah ini.


Kemudian cari kode <div class='post hentry uncustomized-post-template'> atau sesuaikan dengan template anda, dan paste kode dibawah ini persis dibawah kode tersebut.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Silahkan Simpan Template anda dan buka salah satu artikel, untuk melihat hasil dari Membuat Breadcrumb-Navigation di Blogspot. Artikel selanjutnya tentang Membuat Blogger Breadcrumb-Navigation di Blogspot bagian 2. Jadi sengaja saya pisahkan untuk pengiritan area postingan dan lebih memperjelas langkah-langkah dari pemasangan Breadcrumb-Navigation. Terima kasih atas kunjungannya, semoga membantu.