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 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 == "item"'>
<div class='breadcrumbs'>
Anda disini » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <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.
Sundul bozz
BalasHapuswew ... kerenn gann !!!
BalasHapus@Technology hahah garap yg aplikasi
BalasHapus@aldi wah ada tamu nih. thanks dah mampir :D
BalasHapusselain untuk SEO kegunaannya untuk apa lagi mas, ini,,,,???? mohon pencerahannya,,,, mas,,,
BalasHapuskalo menurut saya juga untuk mengetahui tempat dimana kita berada di blog itu. misalkan ada di artikel ini, dan labelnya juga ada disana :D
BalasHapuskalo buat wordpress gimana sob? ditunggu jawabnya...
BalasHapusKalau 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
BalasHapuswah ini yang saya cari gan,,,kunjungan balik di tunggu
BalasHapussaya dah follow gan,follow balik di tuggu
BalasHapusiyah saya follback
BalasHapusBerhasi saya terapkan di blogku sob,makasih banyak infonya,salam.
BalasHapus@Er'end: sama2 sob.. thanks dah mampir
BalasHapusUdah ane jajal diblog ane!! Satu kata buat artikelnye, maknyuss!!
BalasHapus@jasa gambar: makasih dukungannya :) hehe
BalasHapussukses gan..
BalasHapustengkyu...:)
@Ageboy Blogs: thanks :)
BalasHapus@BamZ terima kasih, tutorial ini aku uda cari-cari nggak ada yang jadi di blog ku, cuma ini yang berhasil..sekali lagi makasih ya...:)
BalasHapus@The Banadzi: iyah neng sama2 hehe salam kenal
BalasHapuswah trima kasih ya BamZ...saya pake cara yang lain gagal...cuma disini yang bner n bisa buat blog saya...trima kasih ya..:)
BalasHapus@The Banadzi: he eh.. tapi maaf kalau artikelnya masih sedikit. :D
BalasHapuswah mantabs bro tutornya.., ane langsung praktek dan langsung sukses. makasih ya mas brooo
BalasHapus"sukses selalu untuk anda"
Mantep Gan tutorialnya
BalasHapus@cara membuat ada: yoi mas sama2
BalasHapus@Techno: thanks gan hehe
BalasHapusterimakasih 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.
BalasHapusterima kasih banyak maz
sips,sukses terus gan
BalasHapusthanks gan breadcumbnya udah terpasang di blog ane
BalasHapusterima kasih tipsnya
BalasHapussilaturahmi rek
BalasHapus@aplikasi dan game hp: sip gan sama2 ::)
BalasHapus@ Frigiditas: iyah sama sama
BalasHapus@Rudy Hartono: okeh mas sama2 :)
BalasHapusbagi-bagi yoo infonya masbrrooo..
BalasHapusmakasih infonya mas..^_^
BalasHapusmakasih buat infonya,,,
BalasHapusmau 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,,,
sip dech, saya udah terapkan nih tutorialnya IT'S WORK!! mantab
BalasHapus