Salam hangat dari AF Sahabat Artikel sobat2 blogger. Pada malam hari yang dingin ini saya akan coba share tentang Cara Membuat Navigasi Breadcrumb di Blog. Breadcrumb bisa dikatakan sebagai alat navigasi  yang menunjukkan setiap isi menu label pada setiap atikel terkait yang sangat membantu sekali bagi para pembaca menulusuri blog kita. Dengan memasang Breadcrumb juga bisa meningkatkan optimasi SEO kita sehingga menjadi lebih SEO Friendly. Agar lebih mudah lagi mengetahui apa itu Navigasi Breadcrumb bisa lihat gambar dibawah ini :

Baiklah mungkin itu sedikit penjelasan tentang Breadcrumb, langsung saja kita praktekkan Cara Membuat Navigasi Breadcrumb di Blog . Langkah-langkahnya sebagai berikut :
1. Pertama seperti biasa Sign in ke akun blog masing2, lalu pilih Layout > Template > Edit HTML > sebagai berjaga-jaga jika terjadi kesalahan silahkan download template terlebih dahulu. Lalu jangan lupa untuk mencentang Expand Template Widget.
2. Selanjutnya carilah kode ]]></b:skin>  untuk mempermudah pencarian gunakan ctrl+f. Lalu letakkanlah kode script dibawah ini tepat diatas 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;
}
3. Selanjutnya carilah kode <div class='post hentry uncustomized-post-template'> dan letakkanlah kode script dibawah ini tepat dibawah 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>
4. Jika sudah klik save. dan lihatlah hasilnya. buka salah satu artikel blog untuk melihat apakah Navigasi Breadcrumb telah terpasang dengan benar atau belum.

Dan selesai sudah postingan pada malam hari ini tentang Cara Membuat Navigasi Breadcrumb di Blog
Selamat mencoba dans emoga bermanfaat . . .



4.5

17 komentar:

  1. Oke, gan,, mantaph, langsung ane CObain,,

    ReplyDelete
  2. Selamat Mencoba sahabat
    Semoga bermanfaat . . .

    ReplyDelete
  3. Nice info mksih gan sangat membantu??

    ReplyDelete
  4. OK Sama2 Sobat
    Thank u for coming

    ReplyDelete
  5. Oh ini ternyata :-)
    jadi tahu nama dan caranya... hehe,,, terimakasih sobat

    ReplyDelete
  6. Muhammad Hidayat_Selamat Mencoba gan ,,, OK thannks sobat Link agan juga udah terpasang di blog
    fikri_iyooo sama2 sobat,,, smoga bermanfaat

    ReplyDelete
  7. blognya bermanfaat mas :) omong2 saya tertarik menghasilkan uang dari blog. blog saya isinya cuma omongan sehari2 tapi ada kartun dan artwork terbaru (baru 2 post), saya ini ilustrator. kalo saya liat sih, jarang ada blog ilustrator yang ketempelan adsense dll, bisa bantu ndak mas? saya adalah newbie senewbienewbienya.. maturnuwun...

    ReplyDelete
  8. @yulia:Ide Y bagus mba . .
    saran saya :
    - mba tingkatin ajj dulu isi post dan perbanyak pengunjung ke blog'a. kan percuma juga klo pasang iklan tp pengunjung'a jarang.
    - Buat artikel Y benar2 original kita Y buat. Knapa ? selain kita dapat kepuasan tersendiri, nanti'a kita juga akan mudah mendaftarkan blog kita ke situs2 penyedia iklan seperti adsense
    - utk selebihnya mba bisa baca artikel saya ttg tutorial blog, insyallah bisa membantu buat optimasi SEO blog'a . .

    tetap semangat

    ReplyDelete
  9. Terimakasih om atas tipsnya
    kunjung balik
    www.gozineinfo.com

    ReplyDelete
  10. mantab bro..langsng praktik..

    ReplyDelete
  11. ini untuk blogspot ya???
    ribet juga ya kalau untuk blogspot!
    tapi artikelnya keren sob!

    saya juga pernah nulis artikel yang hampir saya, tapi ini untuk wordpress http://www.arie.pro/blog/cara-membuat-navigasi-situsblog-breadcrumb/

    salam kenal ya sob, jika ada waktu ditunggu kunjungan baliknya di blog saya!

    ReplyDelete
  12. thanks ya sudah share.sukses diterapkan :)

    ReplyDelete
  13. makasih banyak yaa gan sudah mau berbaGI infonya,,

    ReplyDelete
  14. Sangat bermanfaat nih informasinya salam kenal gan moga sukses trus...

    ReplyDelete

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Y dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Y berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari AF Sahabat Artikel

 
Top