Cara buat menu breadcrumb untuk Mempercantik Blog

Cara buat menu breadcrumb paling mudah seAsia untuk Mempercantik Blog,cukup keren gan sampai nyangkut nama Benua kita,tapi sungguh nama itu memang cocok karena tutorial dari kang Roni ini memang benar-benar mudah.
Sedikit penjelasan tentang Menu Breadcrumb adalah menu yang berurutan di atas posting.
Gak usah panjang lebar lihat aja Demonya di bawah ini


Perhatikan pada lingkaran hijau,itulah yang dinamakan menu breadcrumb atau kalau sobat semua susah mengejanya boleh di baca BEKAM,gitu aja kok repot.
Langkah-langkah membuat menu breadcrumb

1.Pastikan artikel anda sudah di beri Label,lihat demonya


Perhatikan lingkaran hijau,itu adalah label yang harus sobat isi

2.Masuk ke TATA LETAK/RANCANGAN -> EDIT HTML,lalu centrang Expend widget templates
3.Cari kode ini       <b:includable id='main' var='top'>
4.Copy code di bawah ini dan letakkan di atas code tadi

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

<!-- Breadcrumbs hack. By Roni http://ngeblogseo.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

5.Belum selesai gan,cari lagi code ini

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

6.Kalo udah ketemu taruh code di bawah ini di atasnya

<b:include data='post' name='breadcrumbs'/>

7.Terakhir sobat cari code ]]></b:skin> dan kemudian copy code di bawah ini dan taruh di atasnya

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

8.jangan lupa di SAVE gan.

SELAMAT BERKREASI AND Kang Roni AKAN MENDO'AKAN KALIAN ,SEMOGA BERHASIL.........

Related Post:

11 comments:

fani said...

makasih bngt kang,,akhirnya blog saya punya menu breadcrumb,.so dah seminggu ni cari2..yang dapat cuma error mulu,.sbg rasa trmksh saya posting akan dtng saya pasang link blog sampean..
makasih bngt N sukses selalu..

http://fanihrs.blogspot.com

mas.hendz said...

dear kang Roni...aku kok gak berhasil ya...
apakah tutor tersebut bisa diterapkan di semua template ?
Makasih pencerahannya...

roni said...

Sebenarnya bisa sob akan tetapi dengan berbedanya kode template penaruhan kode juga harus menyesuaikan.

mas.hendz said...

kang Roni..untuk blog saya ( kunjungi ya )...hehehe
kira-kira penaruhan kode nya dimana ?

roni said...

Udah kangroni kunjungi sob, tapi untuk mengetahui penaruhan kode kangroni harus tahu dulu link download template sobat yang tepat agar bisa kangroni uji coba.

ujik sugiant said...

kang roni.. cara menampilkan LABEL gimana ya ? di entri ku ko' tidak ada ??

roni said...

Untuk blogspot versi sekarang sobat buka edit entri untuk artikel yang sudah dipublikasikan atau buat entri baru,kemudian perhatikan tulisan Label/Labels yg ada disebalah kanan kotak posting,setelah ketemu sobat klik aja dan nanti akan ditampilkan kotak/kolom kecil yang bisa di isi dengan kalimat yang nantinya akan terlihat dibawah postingan sebagai label,setelah anda nulis kalimat untuk label jangan lupa klik Selesai dibawahnya,terus klik fitur Perbarui/Publikasikan di sebelah kanan judul Post dengan warna Orange yg terletak di atas kolom posting.

ujik sugiant said...
This comment has been removed by the author.
ujik sugiant said...

label ku jadinya ko' tampil di bawah posting ya kang, kurang apanya ini?
kang roni bisa kunjungi blog saya, kurang apanya ini?
http://oret-oretblog.blogspot.com

maklum masih awal kang :)
thx..

roni said...

yang sobat maksud apakah menu breadcrumb-nya atau labelnya,kalau label memang rata2 ditaruh di bawah.

doni rungkawa said...

Pengobatan alami mengobati sipilis
Pengobatan alami menyembuhkan sipilis
ramuan alami Pengobatan sipilis
Pengobatan sipilis yg alami

Post a Comment