Cara Pasang Breadcrumb Menu Navigation Di Blog

Halo sobat mampirbo! Kali ini saya ingin berbagi tutorial blog yang berhubungan dengan SEO, yaitu cara pasang Breadcrumb menu navigation pada blog disetiap postingan. Breadcrumb Menu Navigation adalah sekumpulan tag atau link yang diambil dari label postingan blog kita. Breadcrumb menu navigation ini posisinya terletak diatas judul postingan. Sobat bisa melihat breadcrumb menu navigation yang telah saya pasang diatas judul postingan diblog ini. Selain itu dengan memasang breadcrumb menu navigation ini, blog sobat menjadi seo friedly.



Tertarik ingin memasang Breadcrumb Menu Navigation ini? silahkan dilihat caranya dibawah ini.

Cara Pertama:

• Login ke akun blogger sobat.


• Pilih menu tata letak (layout), pilih Edit HTML.


• Jangan lupa centang "Expand Widget Templates".


• Kemudian, cari kode dibawah ini:



<b:if cond='data:post.title'>



• Kemudian tambahkan kode berikut tepat dibawahnya :



<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>



• Ganti kode berwarna merah dengan alamat blog sobat.


• Simpan template.

Jika cara pertama tidak berhasil, sobat masih bisa mencoba cara kedua seperti dibawah ini:

Cara Kedua:

• Login ke akun blogger sobat.


• Pilih menu tata letak (layout), pilih Edit HTML.


• Jangan lupa centang "Expand Widget Templates".


• Kemudian, cari kode dibawah ini:



]]></b:skin>



• Tambahkan kode css berikut tepat diatas kode tadi.



.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}



• Kemudian, carilah kode berikut:



<b:includable id='post' var='post'>



• Tambahkan kode berikut ini tepat dibawah kode diatas tadi.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>



• Simpan template dan lihatlah hasilnya.

Jika cara diatas berhasil, sekarang blog sobat sudah terpasang breadcrumb menu navigation yang membuat blog sobat seo friedly. Tapi kalo kedua cara diatas tidak berhasil diblog sobat, jangan kecewa, masih banyak cara untuk membuat breadcrumb menu navigation yang bisa sobat cari di google dan sesuai dengan template yang sobat gunakan.

Semoga berguna dan bermamfaat
Follow twitter saya ya (twitter.com/mampirbro), ntar saya follow back