Cara Membuat Menu Breadcrumbs - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Selasa, 08 Februari 2011

Cara Membuat Menu Breadcrumbs

Mungkin ada di antara sobat blogger yang belum tahu apa itu menu Breadcrumbs dan manfaatnya. Coba sobat lihat tulisan kecil di atas judul postingan ini, itu adalah menu Breadcrumbs.

Menu Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface di website/blog. Hal ini memberikan pengguna cara untuk melacak lokasi mereka dalam sebuah website/blog. Dengan memasang menu breadcrumbs, memungkinkan agar blog kita lebih SEO friendly dan lebih mudah terindex oleh mesin pencari.

Cara membuat menu breadcrumbs sangat mudah. Bagi sobat blogger yang tertarik, silahkan ikuti langkah-langkah di bawah ini.
1. Masuk ke akun blog sobat
2. Pilih design kemudian edit HTML
3. Jangan lupa expand template widget
4. Untuk menghindari kesalahan, sebaiknya download full template dulu
5. Kemudian masukkan kode di bawah ini di atas ]]></b:skin>

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

6. Kalau sudah, berikutnya cari kode berikut.

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

Kalau tidak ada, cari kode

<div class='post hentry'>

7. Kemudian pastekan kode berikut di bawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
</b:if>

8. Simpan pekerjaan sobat.

Semoga bermanfaat.
Alhamdulillah...

31 komentar:

  1. kq lom muncul ya gan... ?? :(

    BalasHapus
  2. Bisa kok sob, coba periksa dulu mungkin ada yang salah dalam meletakkan kodenya. Kalo ada masalah silahkan tanya lagi sob...

    BalasHapus
  3. kang..
    kode "<div class='post hentry'>"
    sama kode "<div class='post hentry uncustomized-post-template'>"
    ~x( ~x(

    ko ga ada ya dikode html saya
    padahal make Find lhoo carinya
    brarti ndak bisa di kasih menu breadcumb?
    :o :o
    http://www.123horas.blogspot.com

    Mohon bantuannya kang... :D

    BalasHapus
  4. @123horas Kok bs gak ada sob? Udah di expand template widget belum?

    BalasHapus
  5. @ kang Ferri

    hehe.. iya kang.. Blon.. lupaaaa.......
    :)) :)) :)) :))

    Sepp Kang...

    Lihat Hasilnya Di Blog sayaa..

    123horas.blogspot.com

    :D :D :D

    Oiyaa.. cara gantinya biar tulisannya ngga warna Ijo gimana kang?

    BalasHapus
  6. sip gan!
    wah... baru tau ternyata navigasi breadcrumbs tuh menunjang SEO juga ya? hehe..

    BalasHapus
  7. Mantap tutorialnya, ane coba dulu gan bikin breadcrumbsnya..

    BalasHapus
  8. mantap gan! saya baru aja pasang... ditunggu kunjungannya... masih pemula nih. hehhee

    BalasHapus
  9. Thanks. Kalo ngubah ukuran font-nya dimana yah, supaya rada besar. Lihat dulu di blog Saya.

    BalasHapus
  10. Saya coba dan berhasil...
    Terima kasih berbagi ilmunya mas...Siip lah

    BalasHapus
  11. @all : thanks all jika triknya berhasil..klo ada error tanya sini ntar di benerin deh ^^

    BalasHapus
  12. kok diblogku engga bisa ya? apa salah peletakan codenya?
    mohon petunjuk, maaf neh nembie..:)

    BalasHapus
  13. matur suwon mas, tapi ndek SERP kok ora muncol, kiro 2 kapan yo Breadcrumbs di index ndek SERP.

    BalasHapus
  14. Langsung praktek kebetulan di templata aku nggak ada
    thanks sob..

    BalasHapus
  15. nice post gan ane suka banget tahnk you yah

    BalasHapus
  16. terimakasih atas info yang luar biasanya den

    BalasHapus
  17. sungguh luar biasa seksli ..terimakasih atas penerangannya

    BalasHapus
  18. nice post......... semoga blog ini tetap keren sepanjang masa

    BalasHapus
  19. terimakasih atas informasinya yang bermanfaat itu tuh,,, luar biasa

    BalasHapus
  20. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus


  21. ditunggu artikel selanjutnya gan

    BalasHapus

Post Top Ad

Space Iklan