1. Seperti biasa login dulu ke akun Blogger sobat.
2. Masuk tab Rancangan lalu pilih yang Edit HTML.
3. Silahkan backup template sobat terlebih dahulu dengan klik Download Template Lengkap.
4. Centang Expand Template Widget.
5. Kemudian cari kode ini <b:include data='top' name='status-message'/> , biar lebih mudah silahkan gunakan fitur Search pada browser sobat dengan perintah Ctrl + F.
6. Lalu tandai kode tersebut dan ganti dengan kode ini
<b:include data='top' name='status-message'/>7. Kemudian cari kode berikut <b:includable id='main' var='top'> , tandai kode tersebut lalu ganti dengan kode di bawah ini.
<b:include data='posts' name='breadcrumb'/>
<b:includable id='breadcrumb' var='posts'>8. Kemudian cari kode ini ]]></b:skin> , lalu tambahkan kode CSS berikut di atas atau sebelum kode tersebut.
<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>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://www.blackdeviant.web.id/-->
/* Breadcrumbs CSS info @ http://www.blackdeviant.web.id/ */9. Simpan template sobat. Sekarang coba sobat lihat hasilnya, jika berhasil berarti anda sukses mengikuti tutorial dari saya, tapi jika gagal anda belum berhasil. Maka silahkan komentar tentang masalah sobat, nanti akan saya bantu.
.breadcrumbs{font-size:95%;line-height:1.4em;border-bottom:3px double #e6e4e3;margin:0 0 15px;padding:5px 5px 5px 0;}
Black Deviant | Belajar SEO Blogger | Tutorial Blogger
mantap.. ilmu baru nee..
BalasHapusnti ane coba ah..
kebetulan ... baru mau belajar Blogger....~~
iya sob..
BalasHapuskebalikan ma saya
saya baru mau belajar wordpress nih sob..
Breadcrumbs memang sangat seo friendly, karena labelnya bisa terindex. Alangkah baiknya lagi jika judulnya diganti jadi "cara memasang navigasi breadcrumb" agar lebih seo friendly juga di SE, karena url dan judul harus sama. :)
BalasHapusudah dicoba gan :D
BalasHapusdan berhasil dengan sukses, makasih gan :rescel
http://jari10.blogspot.com
Wah saya udah lansung ada tuh. Salam sahabat http://www.site-benefit.infofit.info
BalasHapusMantap Gan
BalasHapusmumet jg ya kalo ngikutin edit template biar seo friendly
BalasHapusgoood
BalasHapusgan.. kok ada alamat website ente itu buat apah !!
BalasHapusitu cuman info aja, ato juga bisa disebut credit...
Hapusitu juga gak ngaruh kok, gak ada efek buat web yang pasang ntu code,,,
di remove juga gag apa2 kok, intinya cuman kasih info/credit aja