Breadcrumbs ? apa itu ? breadcrumbs itu semacam navigasi pada blog. Tujuannya tidak lain untuk memudahkan pengunjung blog kita. Pada blogger, breadcrumbs akan ditampilkan sesuai dengan label yang ada. Dan navigasi breadcrumbs ini akan segera terindeks oleh si Google hanya dalam waktu 2 atau 3 hari (sesuai pengalaman saya) dan lebih ramah terhadap SEO tentunya. Nih bukti jika blog saya yang sudah memakai breadcrumbs terindeks oleh om Google.
Nah jika kalian tertarik untuk membuatnya, silakan lihat caranya di bawah ini, perhatikan dengan seksama oke :)
1. Login ke Blogger seperti biasa
2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
3. Masih di bagian Template, sekarang kamu klik Edit HTML --> Pilih Lanjutkan --> Sekarang kamu cari kode ]]></b:skin> gunakan CTRL + F untuk memudahkan pencarian.
4. Salin kode di bawah ini dan letakkan diatas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;
font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
5. Cari kode <b:includable id='main' var='top'> kemudian kamu hapus kode <b:includable id='main' var='top'> dan ganti kode yang tadi sudah dihapus dengan kode di bawah ini.
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
6. Klik Simpan dan nantinya breadcrumbs yang kamu buat akan segera terindeks oleh Google.
punya aku belum ada ininya hehehe, terima kasih atas kunjungan diblogku, salam! :D
ReplyDeletesalam juga bang basid :) dipakelah kalau belum ada :)
Deletepertamaxxxx gan,....
ReplyDeletekebetulan blog ane udah ada,
jdi nyimak aja deh,..
:)
heheh iya gpp gan :)
Deletewah panjang ya scriptnya, tapi memang sangat penting agar mudah terindex sama google.
ReplyDeletepanjang scriptnya juga tapikan tinggal copas doang :D
DeleteMantap sob... :)
ReplyDeleteSkalian mengucapin met lebaran..
Mohon mav lahir n bathin ya sob :)
selamat berlebaran juga akang :)
Deleteperasaan ane dah pasang ne breadchumb? Tp gk tau sama gk scriptnya ma yg ini?
ReplyDeletewah coba di cek dulu gan :D
Deletetrimakasih scriptnya sobat, mbah google katanya seneng sama blog yang ada breadcrumbnya:}
ReplyDeletewah mbah google kenal ama ente juga yah gan :D
Deletealhamdulillah ku udah masang gan . .hehehe udah lama terindek di om google
ReplyDeletewah bagus dong kalau begitu
Deletewah mantab ya kalau ramah dengan SEO
ReplyDeletesangat bermanfaat... :)
bener mba ayuu :)
Deletekunjungangan balik ku sob.. btw minal aidin wal faizin mohon maaf lahir batin y sob..
ReplyDeletemaaf lahir batin juga gan, makasih sudah datang
Deleteudah terpasang sejak awal ngeblog ahihi =))
ReplyDeletewah ane malahan baru2 ini hehe
Deleteini memungkinkan sang admins jadi populer juga ya..
ReplyDeletebtw, banyak istilah baru yang berguna buat saya.
heheh makasih om :)
DeleteSudah beberapa tutor saya ikuti tapi kok gak bisa ya gan.?yaa akhirnya terima keadaan aja.:)
ReplyDeletepadahal saya pengen juga breadcrumbs saya ke indek ma gugel.
coba pake yang ini om, pnya saya terindeks tuh :)
Deletemf lahir bathin ya bos..
ReplyDeleteikut nyimak ya bos..lumayan buat nambah ilmu
iyah kang, maaf lahir batin juga yah :)
Deletewah wah keren nih breadcrumbnya sobat...
ReplyDeletesngaaat keren sekali ini kaka :D
Deletewah, tambah lagi satu istilah baru.
ReplyDeletesaya coba, saya coba,...
yang kemarin kayaknya susah sekali...
terima kasih ^_^
kalau yang ini pasti mudah :)
Deletegue udah pernah nyoba masang ini gak nongol bang ...
ReplyDeletemungikin templatenya kali yaah
yang bener? mungkin saja begitu om, ntar saya coba kasih yang lain lagi
Deletealhamdulilah breadcrumbs saya sudah rapih di blog dan terindeks
ReplyDeleteyoi dena, sangat bagus
Deleteyowman, sangaat bagus lah itu :)
ReplyDeleteMenarik nih sob....boleh langsung praktek
ReplyDeletewajib di praktikan ini sobatku
DeleteIjin nyimak ja :)
ReplyDeletesilakan om
Deletewah kayaknya keren,coba dulu deh
ReplyDeletesangaat keren ini om
DeleteTerima kasih infonya, sdh sy coba ttp msh blm berhasil. Tlg pencerahannya.
ReplyDeleteBlm brhasilnya gmana gan?
Deletewah perlu banget nei bang. supaya bisa tambah visitor ya kalau mangkal di google. makasih nei bang.
ReplyDeletemaaf baru bales komennya :) hehe iyah jadi banyak kayak blog abang
DeleteMantap sekali sob, memang benar mas Google sangat menyukai blog yang memiliki navigasi yang baik seperti adanya breadcrumb ini,,,,SELAGI MASIH DALAM SUASANA IDUL FITRI IZINKAN SAYA MENGUCAPKAN MINAL AIDZIN WAL FA IDZIN MOHON MAAF LAHIR DAN BATHIN
ReplyDeletemaaf baru bales komennya :) thnaks mas oboy, maaf lahir batin juja yah
Deletewah mantap nie..
ReplyDeleteterima kasih kawan..
materinya sangat bermanfaat untuk blog saya.,,
maaf baru bales komennya :) sip gan sama2
Delete
ReplyDeleteThe widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.
GIMANA NIH
ente coba lagi, mungkin saat copas ada kode yang terhapus, kalau ada tulisan
Delete"readmore :http://hzndi....." di hapus saja
ada kesalahan dalam kodenya dan udah ane ganti, silakan dicoba
Deletesaya coba koq gak bisa????
ReplyDeletesekarang ente coba, kodenya udah ane ganti
Deleteblog saya juga sudah menerapkan ini.. btw gima caranya bikin komentar adminnya kayak di blog sobat ini..?? keren...
ReplyDeletepertama ente bikin dulu threaded comment seperti disini
Deletehttp://hzndi.blogspot.com/2012/08/cara-membuat-threaded-comment-untuk.html
kemudian untuk kode CSS-nya adalah disini
http://hzndi.blogspot.com/2012/06/membuat-threaded-comment-dengan-3.html?=1
Makasih master. Sangat berguna buat newbie seperti saya.
ReplyDeletehehe bisa aja nih si om bilang ane master segala
Deletemenarik banget tuh tutorialnya
ReplyDeletemakasih sudah datang yah
Delete. . idem kawan. aq juga udah pake . .
ReplyDeleteudh heheh udah pake jg samaan dong :)
DeleteWah berbeda nih breadcrumbnya sama punya ane gan. Ijin nyoba dulu yah gan :)
ReplyDeleteoke gan sama2 :)
Deletehadir lagi sob..emang uda ta coba cara ini tapi di google ko g nongol,kira2 knp y?pa bwaan template
ReplyDeletetunggu beberapa hari gan, tadinya ane juga gitu eh sekarang udah nongol
DeleteMakasih sob sharenya,..
ReplyDeletesangat berguna...
tapi nampaknnya ini model semua label masuk di bradcumb yaah...??
Thanks bro, blogku sekarang udah ada bredcrumbsnya.... semoga tambah bagus buat SEO
ReplyDelete