Cara Membuat Breadcrumb

Cara membuat Breadcrumb atau menu navigation di blogspot. Breadcrumb adalah menu navigasi yang bisa membantu pengunjung / visitor blog supaya mereka tahu sedang membuka / mengunjungi halaman apa dan berada di kategory atau label apa. Selain itu Breadcrumb juga diperlukan untuk mengoptimalkan Seo On Page. Pada template blogspot gratis masih banyak yang belum menambahkan Breadcrumb atau menu navigasi ini. Untuk template yang saya edit sendiri ( Template blogger Seo friendly BSeo-V1 dan Template blogger 3 kolom B1 ) alhamdulillah sudah ditambahkan Breadcrumb. Karena masih banyak template yang belum ditambahkan Breadcrumb, sekarang saya akan share cara membuat Breadcrumb di blogspot.
Cara Membuat Breadcrumb

Cara membuat Breadcrumb di Blogspot

  • Login Blog anda > Design > Edit HTML dan centang Expand Widget templates
  • Cari kode ]]></b:skin> ( gunakan CTRL + F agar lebih mudah )
  • Paste kode berikut tepat diatas kode ]]></b:skin>
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
  • Kemudian cari kode <b:includable id='post' var='post'>
  • Setelah ketemu, silahkan paste kode berikut tepat dibawah kode <b:includable id='post' var='post'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>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>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
  • Save template ( selesai ) 

Cara membuat breadcrumb

Cara membuat Breadcrumb atau menu navigation ini sudah bukan rahasia lagi, sudah banyak para blogger yang menulis artikel cara membuat breadcrumb. Ada yang langsung bisa dan masih ada juga yang salah penempatan kode, sehingga breadcrumb tersebut tidak muncul pada halaman blog. Alhamdulillah sebelum artikel ini ditulis, saya sendiri sudah mencoba atau mempraktekannya dan berhasil. Wah sepertinya sudah lumayan panjang artikelnya, ya sudah cukup disini dulu artikel cara membuat Breadcrumb di blogspot, jangan lupa komentarnya kalau ada kesalahan maupun tidak dan sampai ketemu di artikel selanjutnya.

49 comments:

Technology & Learning mengatakan...

Sundul bozz

aldi mengatakan...

wew ... kerenn gann !!!

Admin mengatakan...

@Technology hahah garap yg aplikasi

Admin mengatakan...

@aldi wah ada tamu nih. thanks dah mampir :D

Test Drive Mobil mengatakan...

selain untuk SEO kegunaannya untuk apa lagi mas, ini,,,,???? mohon pencerahannya,,,, mas,,,

BamZ mengatakan...

kalo menurut saya juga untuk mengetahui tempat dimana kita berada di blog itu. misalkan ada di artikel ini, dan labelnya juga ada disana :D

Helmy Satria mengatakan...

kalo buat wordpress gimana sob? ditunggu jawabnya...

BamZ mengatakan...

Kalau Wordpress yang gratisan kayaknya kurang bebas bro, ada sebagian templatenya yg bisa menambah menu. tapi kebanyakan yg g bisa. cara satu2nya kalo wordpress gratisan, Upgrade dl ke premium baru bisa edit CSS nya :D

rockmanticks mengatakan...

wah ini yang saya cari gan,,,kunjungan balik di tunggu

rockmanticks mengatakan...

saya dah follow gan,follow balik di tuggu

BamZ mengatakan...

iyah saya follback

Er'end mengatakan...

Berhasi saya terapkan di blogku sob,makasih banyak infonya,salam.

BamZ mengatakan...

@Er'end: sama2 sob.. thanks dah mampir

jasa gambar mengatakan...

Udah ane jajal diblog ane!! Satu kata buat artikelnye, maknyuss!!

BamZ Gz mengatakan...

@jasa gambar: makasih dukungannya :) hehe

Ageboy Blogs mengatakan...

sukses gan..
tengkyu...:)

BamZ Gz mengatakan...

@Ageboy Blogs: thanks :)

The Banadzi mengatakan...

@BamZ terima kasih, tutorial ini aku uda cari-cari nggak ada yang jadi di blog ku, cuma ini yang berhasil..sekali lagi makasih ya...:)

BamZ Gz mengatakan...

@The Banadzi: iyah neng sama2 hehe salam kenal

The Banadzi mengatakan...

wah trima kasih ya BamZ...saya pake cara yang lain gagal...cuma disini yang bner n bisa buat blog saya...trima kasih ya..:)

BamZ Gz mengatakan...

@The Banadzi: he eh.. tapi maaf kalau artikelnya masih sedikit. :D

cara membuat ada mengatakan...

wah mantabs bro tutornya.., ane langsung praktek dan langsung sukses. makasih ya mas brooo

"sukses selalu untuk anda"

Techno mengatakan...

Mantep Gan tutorialnya

BamZ Gz mengatakan...

@cara membuat ada: yoi mas sama2

BamZ Gz mengatakan...

@Techno: thanks gan hehe

Orang Cacat mengatakan...

terimakasih banyak maz, barusan saya sudah coba di blog yang baru saya buat ternyata berhasil. salam knal dari saya maz, saya baru belajar dan jujur ini adalah dunia baru yang cukup meringankan beban saya. maz tolong dilihat blog http://orangcacat.blogspot.com apakah penempatannya sudah benar apa masih salah.

terima kasih banyak maz

BamZ Gz mengatakan...

sips,sukses terus gan

aplikasi dan game hp mengatakan...

thanks gan breadcumbnya udah terpasang di blog ane

Obat Frigiditas mengatakan...

terima kasih tipsnya

Rudy Hartono mengatakan...

silaturahmi rek

BamZ Gz mengatakan...

@aplikasi dan game hp: sip gan sama2 ::)

BamZ Gz mengatakan...

@ Frigiditas: iyah sama sama

BamZ Gz mengatakan...

@Rudy Hartono: okeh mas sama2 :)

Mr_ManzoMashiro mengatakan...

bagi-bagi yoo infonya masbrrooo..

arizkicp mengatakan...

makasih infonya mas..^_^

RIISCKY MIZA mengatakan...

makasih buat infonya,,,

mau nanya pas scrip ini :

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

itu didepan kata "breadcrumbs{" ada titiknya tho ?
mohon pencerahannya,,,

tips modifikasi motor mengatakan...

sip dech, saya udah terapkan nih tutorialnya IT'S WORK!! mantab

Foto-Foto mengatakan...

Keren sobat, udah saya terapkan di blog saya http://notifikasiku.blogspot.com berhasil dengan baik dan keren...!

mantap jaya mengatakan...

mantap gan buat navigasi...

fiqri mengatakan...

makasih atas infonya tentang Cara Membuat Breadcrumb yang sangat bermanfaat...
happy blogging...

Napitoe mengatakan...

spertinya, dulu saya sdh prnh membuatnya, tapi kok gak muncul2nya ya...

izin berkonsentrasi dsni gan & ngopy pastekannya. thank's gan

info saya mengatakan...

maju trus

rephay mengatakan...

nice info sob

Aneka Souvenir Bambu mengatakan...

gmana gan caranya agar Breadcrumb muncul??saya memakai template dari agan??

berita bola mengatakan...

ini dia yang aku cari2 :)
thanks ya aku coba dulu ntar kalo ada yang ga bisa aku balik lagi kemari :D

-AryKame- mengatakan...

jadi breadcrumb mempengaruhi SEO juga yak. :o

Bisnis Warung mengatakan...

Mas dicoba langsung sukses tapi kok nggak kebaca google ya?

Adiet's Media | 100% Download Gratis | mengatakan...

Udah saya coba mas thankzz !!!

roderick merr mengatakan...

There may be noticeably a bundle to learn about this. I assume you made certain good factors in features also.

advertising services
seo company in india

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih