Kali ini saya akan memberi tutorial kepada sahabat Blogger cara memasang breadcrumb agar terindeks Google. Tutorial ini saya dapatkan dari Maskolis, tapi rubah sedikit gaya Breadcrumbnya.
Ok, apakah sobat semua mengetahui apa itu breadcrumb, kalau sobat tidak tahu apa itu Breadcrumb, saya akan jelaskan sedikit.
Breadcrumb menurut Maskolis adalah "Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.", dan juga dapat memudahkan pengunjung untuk mengetahui posisinya dalam suatu artikel, menurut Maskolis, Breadcrumb ini berfungsi untuk memudahkan web/blog kita untuk terindeks di Google, karena search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog.
Itu tadi adalah pengertian dan fungsi dari Breadcrumb, sekarang kita akan mencoba mempraktekannya.
Ikuti cara berikut :
- Cara agar kita bisa mendesainnya, sobat Cari Kode ]]></b:skin
- Lalu masukan kode dibawah ini
.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:11px;line-height:1.4em;border-bottom:2px solid #f6f6f6;}
Note :
Tulisan yang diwarnai warna merah bisa sobat ganti, itu adalah ukuran Font dari Breadcrumb.
Jika sobat ingin menghilangkan garis bawahnya, sobat bisa hilangkan kode border-bottom:2px solid #f6f6f6; .
- Setelah memasukan CSS diatas, Sobat Cari kode <div class='post hentry'>
- Lalu Masukan kode berikut dibawahnya
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
Note :
Yang saya tandai warna merah itu berupa Title, jika Cursor Pointer kita geser diatas Link label, maka titlenya akan muncul.
Demikian tutorial dari saya, untuk sumbernya, sobat bisa lihat di Artikel Maskolis disini.
