Cara Membuat Breadcrumb-navigation

Posted by Abdul Roqib | Thursday, November 26, 2009 38 comments
Breadcrumb-navigation bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Navigasi ini di kenal dengan nama breadcrumb-navigation.
Tidak hanya itu dengan adanya breadcrumb-navigation maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori. breadcrumb-navigation bisa di pasang pada template blogger dengan sedikit modifikasi templatenya, dengan begitu breadcrumb-navigation akan lebih mudah jika langsung di praktekkan.

Langkah-langkah/ cara memasang breadcrumb navigation :
1. Login ke blogger.com
2. Klik Tata Letak.
3. Pilih tab Edit HTML
4. Click Download Full Template and
please back up your template first.
5. Kemudian beri tanda centang
pada kotak kecil di samping
tulisan Expand Template Widget.
6. Silahkan cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah
ini persis di atas kode ]]></
b:skin>

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

8. Silahkan cari kode berikut pada
template anda :
<div class='post hentry uncustomized-post-template'>

9. Copy lalu paste kode di bawah ini persis di bawah 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' 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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Kemudian Save Template.
11. Tunggu beberapa saat sampai template anda tersimpan. Setelah selesai lihat pada posting anda tepatnya di atas judul artikel untuk menentukan berhasil tidaknya anda memasang breadcrumb-navigation. Jika berhasil maka breadcrumb-navigation nya akan tampil seperti di atas judul posting ini.
Selamat mencoba..

38 comments: to "Cara Membuat Breadcrumb-navigation"

Rizal saputra said...

Mengamankan Pertamaxxxx dulu

sepwawan said...

Thanks, infonya mas langsung praktek.

mastpini said...

artikel yang bgus mas. Lam kenal

kdrama said...

thanks sob buat tutorialnya, sangat berguna buat saya yang masih newbie ini.
salam kenal ya.

Never Give Up Dude, All Come From Zero said...

waahh, thanks gan buat tutorialnya. Bolehkah saya cantumkan blog mas Abdul Roqib di daftar blog dofollow saya?

David said...

sangat berguna om,terima kasih karna saya juga masih newbie dalam buat blog..

yondaime said...

wih.. manteb ... berhasil.. makasih ya mas...
kunjugi balik.ya

Anonymous said...

yang komentar diatas semua cuma mengharap kunjungn blik,,hiahh,,
semuanya cuma memuji..


artikelnya bagus,,tapi saya mau nanya dong mas,,
di tempalate ku ga ada tuh
post hentry uncustomized-post-template

bagaimana solusinya,tolong..

artana's blog said...

makasih ! tapi kayaknya tidak semua temple blogger punya kode
post hentry uncustomized-post-template , contohnya blog saya gak isi kode itu, cuman isi
div class='post hentry
gimana tuh ?

Indonesian Blogger said...

Makasih ya atas infonya, ini sangat bermanfaat bagi saya yang masih newbie

Panduan Dan Tutorial Gratis said...

salam kenal gan, tararengkiu atas infonya

Membuat breadcrumb Blogspot said...

terimakasih udah sharing, berkunjung untuk blog travelling...thanks ya

dede said...

ok thanxs infonya gan.........

Puguhkris said...

wah mantab gan infonya, nice share,,

Grup School Contest V said...

wah bagus juga buat tutornya.,.,.,.,!!!

jual rebana said...

mkasih bos atas infonya.

Berpikir Positif said...

buat mas anonim : saya tidak mengharapkan kunjungan cuma saya bener-bener perlu tutorial ini karena meski saya sydah lama ngeblog masalah utak atik blog belum bisa sama sekali

andhie said...

hoorreeee..............

punyaku dah jadi kang...

makasih ya atas tutor_nya..

thanx....

bisa minta tips yang lain gak...??

Cayun said...

wah,,
berhasil 1000%
terimakasih infonya KAng,
http://tanpa-isi.blogspot.com

dikacom said...

terima kasih infonya

Angga Pradipta said...

thanks gan :) di coba dulu
kunjungannya yah : Gecok

Oerang Boegist said...

thanks gan artikelnya sangat membantu...!!!

posan said...

Great article, thanks this works for my blogspot blog

watchseasonepisodesonline said...

This isn't work for new template :(

harga jual blackberry iphone laptop murah said...

makasih tipsnya mas,, udah terpasang d blog ane..., :D

puluthriau said...

saya cobain dulu

Beritamandiri said...

wah, mangstab.....berhasil sob. Makasih

Foto-Foto Syahrini | Insanitis 37 said...

Terima kasih banyak atas tutorial breadcrumbs nya Sob..sangat membantu sekali. Senang sekali berunjug ke mari :)

Tivisiana said...

Mkasih bang abdul tutorial membuat breadcumb nya, berguna neeh bwat SEO

Online News said...

membingungkan tuh buat pemula seperti saya http://toko-news.blogspot.com ... wkkwkwkw

Toko Blog said...

menambah penhetahuan saya nih.. yuuk pada tukar link sama toko blog

eksotisme said...

Sukses dengan selamat kang....
Terima kasih atas tips nya yang sangat berharga

Admin said...

Assalamualaikum,..
saya sudah coba,..tp kok ga berhasil..kalo saya boleh meminta,..bisa ga saya ngopy / minta file template mas?? kalo boleh,..saya minta file template kayak punya mas, dan di kirim ke email ya mas,..saya masih pemula,..ga paham dengan otak atik template,..berkali kali coba kok ga pernah jadi,.. Makasih ya mas,... ^^,

rofiek said...

tambah wawasan ni...

Yohanes said...

salam kenal sobat,
breadcrumb atau dikenal dengan menu navigasi memang sangat berguna untuk pengontrolan navigasi cepat juga dalam mengklasifikasikan setiap content di blog kita.
artikel ini memang sangat berguna..thanks udah di post sobat

Abu Rafifah said...

Assalamu'alaikum Warahmatullahi Wabarakatuh...Jazakallahu Khairan atas berbagi ilmunya sahabat.
Langsung dipraktekkan

Everything™ZM said...

mas saya izin pake caranya ! thanks banget sebelumnya !

Anang said...

hemm....aku udah praktekin sob
tapi kagak berhasil..
gimana tuch??
bisa bantu!!

Post a Comment

What's your comment about Cara Membuat Breadcrumb-navigation, type in the comment form below. Please Don't Spam.!!!