Membuat Navigasi Breadcrumb Pada Postingan Blog

Viyan Pradita Jumat, Juni 03, 2011 ,

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe
Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>

6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

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

7.Kemudian carilah kode:

<div class='post hentry uncustomized-post-template'>

8. Setelah ketemu, taruhlah kede berikut tepat diatasnya

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

9. Bila sudah, jangan lupa untuk Save Template.
Sekian, semoga bermanfaat.

Article Information:
Description: Membuat Navigasi Breadcrumb Pada Postingan Blog
Reviewer: Viyan Pradita - Itemreviewed: Membuat Navigasi Breadcrumb Pada Postingan Blog - Rating: 4.5

Ditulis Oleh :

Artikel Membuat Navigasi Breadcrumb Pada Postingan Blog ini dipublish pada hari: Jumat, Juni 03, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

15 komentar
Terjun Ke Kolom Komentar

  1. sudah saya coba mas, berhasil. thanks :)

    BalasHapus
  2. @gsgumilar: Sipp... sama2 mas bro :D

    BalasHapus
  3. misi gan numpang tanya
    itu yang cara ke tujuh saya cari g ada gan
    gmn ya?

    BalasHapus
  4. @aplikasi symbian: Setelah melihat template sobat, memang tidak da kode pada langkah no7.
    Coba cari kode ini
    Untuk mempermudah tekan Ctrl+F
    < div class='wrapfullpost' > (hilangkan spasi-nya dalam kode tersebut waktu pencarian)

    kalo sudah ketemu, pastekan kode pada langkah no8 tepat diatasnya.

    BalasHapus
  5. suksesss bang,.,mantapp,.mampirr,.,ngomong" ini ada chatboxnya gak???

    BalasHapus
  6. @arif nur: Sipp mas, untuk ChateboX blm aq pasang soalnya bingung mau tak taruh dimana. :))

    BalasHapus
  7. makasih mas,.

    mantaph infonya,.

    salam blogging,.,

    BalasHapus
  8. ok gan nice share,,,tp blog saya udh kepasang slmknl moga mkin sukses :) visit me back gan

    BalasHapus
  9. infonya bermanfaat banget bro, nanti saya akan coba, thank udah share

    BalasHapus
  10. saya masih belum ngeh bro he he

    BalasHapus
  11. Mohon izin untuk mempraktekan langsung tips dan trik yang ada disini.. makasih mas bro

    BalasHapus
  12. Terimakasih nginfo yang bermanfaat bagi saya yang pemula

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers