37

Cara Membuat Breadcrumb

Bisnis Berkah Halal
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.
Tweet

37 comments:

  1. Technology &amp;amp; LearningNov 17, 2011 03:34 PM

    Sundul bozz

    BalasHapus
  2. wew ... kerenn gann !!!

    BalasHapus
  3. @Technology hahah garap yg aplikasi

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

    BalasHapus
  5. Test Drive MobilNov 17, 2011 09:48 PM

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

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

    BalasHapus
  7. Helmy SatriaNov 18, 2011 04:05 AM

    kalo buat wordpress gimana sob? ditunggu jawabnya...

    BalasHapus
  8. 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

    BalasHapus
  9. rockmanticksNov 19, 2011 05:30 PM

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

    BalasHapus
  10. rockmanticksNov 19, 2011 05:34 PM

    saya dah follow gan,follow balik di tuggu

    BalasHapus
  11. iyah saya follback

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

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

    BalasHapus
  14. Udah ane jajal diblog ane!! Satu kata buat artikelnye, maknyuss!!

    BalasHapus
  15. @jasa gambar: makasih dukungannya :) hehe

    BalasHapus
  16. Ageboy BlogsJan 1, 2012 10:49 AM

    sukses gan..
    tengkyu...:)

    BalasHapus
  17. @Ageboy Blogs: thanks :)

    BalasHapus
  18. @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
  19. @The Banadzi: iyah neng sama2 hehe salam kenal

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

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

    BalasHapus
  22. cara membuat adaJan 26, 2012 10:34 AM

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

    "sukses selalu untuk anda"

    BalasHapus
  23. Mantep Gan tutorialnya

    BalasHapus
  24. @cara membuat ada: yoi mas sama2

    BalasHapus
  25. @Techno: thanks gan hehe

    BalasHapus
  26. 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

    BalasHapus
  27. sips,sukses terus gan

    BalasHapus
  28. aplikasi dan game hpFeb 19, 2012 09:57 PM

    thanks gan breadcumbnya udah terpasang di blog ane

    BalasHapus
  29. Obat FrigiditasFeb 25, 2012 04:28 AM

    terima kasih tipsnya

    BalasHapus
  30. Rudy HartonoFeb 29, 2012 07:32 PM

    silaturahmi rek

    BalasHapus
  31. @aplikasi dan game hp: sip gan sama2 ::)

    BalasHapus
  32. @ Frigiditas: iyah sama sama

    BalasHapus
  33. @Rudy Hartono: okeh mas sama2 :)

    BalasHapus
  34. Mr_ManzoMashiroMar 4, 2012 02:19 PM

    bagi-bagi yoo infonya masbrrooo..

    BalasHapus
  35. makasih infonya mas..^_^

    BalasHapus
  36. RIISCKY MIZAMar 7, 2012 08:31 AM

    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,,,

    BalasHapus
  37. tips modifikasi motorMar 11, 2012 07:59 PM

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

    BalasHapus

◄ Posting Baru Posting Lama ►
 

Komentar Terbaru