Wednesday, August 4, 2010

Cara buat menu breadcrumb di blog

Menu navigasi breadcrumb menurut blogger senior adalah salah satu trik seo untuk blog kita. Menu ini menampilkan urutan dari link utama sampai ke artikel yang sedang kita baca. Selain trik seo menu ini memudahkan/memberitahu pembaca mengetahui posisi artikel yang dia baca, biasanya diatas postingan kita. Urutannya biasanya seperti ini :
Home > label blog > artikel yang dibaca
Seperti gambar ini ( saya comot juga dari blognya kang rohman)



Tutorial cara buatnya sudah lama ada diartikel master blogger kang rohman, jika sobat ingin baca dari blognya silahkan ke alamat link ini : http://www.blogspottutorial.com/2008/12/how-to-make-in-blogger.html

Karena konon ini berpengaruh untuk seo, maka tips ini saya comot. Ok jika sobat males buka tab baru atau jendela baru, sobat bisa mengikuti cara buatnya melalui blog ini.

1. Login ke akun blog kamu
2. Klik rancangan, lalu pilih edit html
3. download dulu template kamu untuk jaga-jaga
4. Centang di box Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode dibawah ini dan letakkan diatas kode yang dicari tadi (no. 5)

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

7. Cari kode <div class='post hentry uncustomized-post-template'>

Copy kode berikut ini dan letakkan dibawah kode <div class='post hentry uncustomized-post-template'>


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


8. Klik save

Kita tidak bisa pratinjau, jadi harus disave dulu.
Jika kode no 7 tidak anda temui, cari kode <div class='post hentry'> dan letakkan dibawahnya.

Tadinya mau saya ganti nama jadi menu breadtalk (bwhaha), cuma nggak enak sama blogger senior.
Ohya jika sobat alergi dengan namanya breadcrumb, bisa kamu ganti dengan kata kamu sendiri, sobat hanya menganti seluruh kata breadcrumb termasuk kode cssnya.

No comments:

Post a Comment