Cara Membuat Menu Navigasi Sederhana (Breadcrumb) di Blog

Bagi kebanyakan kita yang telah mahir ataupun sering membuat tulisan diblog, ataupun memodivikasi blog-nya, tentu sudah tidak asing lagi dengan judul diatas (Cara membuat menu navigasi sederhana (breadcrumb) di blog). Apalagi bagi beliau-beliau yang telah mahir di bidang blog, tentu hal ini sudah terdengar basi. Tapi tidak mengapa, saya mengarsipkannya sebagai tulisan di blog saya ini. Di blog yang masih terlihat kaku dan apa adanya ini.

Menu navigasi sederhana, yang sering dikenal dengan sebutan breadcrumb, merupakan suatu menu di blog yang memudahkan pengunjung untuk melihat posisi artikel yang sedang dibacanya serta mencari artikel lainnya dalam satu kategori di blog. Tips blog ini saya peroleh dari beberapa sumber, yang tentu saja telah mahir di bidang blog dan segala isinya.

Contoh menu navigasi sederhana seperti yang ada di blog saya ini. Pada saat kita masuk ke halaman utama, menu ini tidak terlihat di blog. Namun pada saat kita mengklik suatu judul, maka menu navigasi ini akan muncul diatas judul blog. Seperti yang terlihat di blog saya ini. Mohon klik salah satu judul, kemudian bisa kita perhatikan di atas judul blog ini akan ada menu-nya. Nah itulah menu sederhana di blog saya yang cara memasangnya seperti ini :
  • Masuk ke Tata Letak, kemudian pilih tab Edit HTML
  • Kita bsa memback up dulu template blog kita sebelum melanjutkannya. Dengan mengklik Download Full Template tentunya.
  • Kemudian beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
  • Kita cari kode ]]></b:skin>
  • Copy-kan kode berikut di atas kode ]]></b:skin>

  • .breadcrumbs{
    padding:5px 5px 5px 5px;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:3px double #DD0B0B;
    }

  • Setelah itu, kita cari kode seperti dibawah ini :

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

  • Kemudian copykan kode ini dibawah kode tersebut

  • <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    Anda berada di &#187; <a expr:href='data:blog.homepageUrl'>Halaman Muka</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>

  • Simpan template kita
Sudah selesai belum? Sudah sob, kita tinggal melihatnya di halaman blog kita. Kita klik salah satu judul artikel di blog dan lihat sudah ada perubahan belum. Lihat diatas judul blog, sudah adakah menu navigasi sederhana seperti yang terlihat di blog saya ini.

Jika berhasil, maka blog kita akan terlihat ilustrasinya seperti ini :


Referensi : Dari berbagai sumber


Ikon ini merupakan link ke situs bookmark sosial
  • Facebook
  • Google
  • Twitter
  • Digg
  • Delicious
  • Furl
  • Reddit
  • StumbleUpon
  • Technorati

  • Informasi : Maaf sobat, pada beberapa artikel Tips Blog, terdapat instruksi Tata Letak. Instruksi tersebut saat ini berubah menjadi Rancangan. Hal ini karena adanya perubahan langsung dari blogger. Terimakasih atas pemaklumannya.

    Berikut Yang Berhubungan Dengan Artikel Diatas :



    Alhamdulillah telah ada 29 komentar dari sobat :

    1. Saung Web said...

      Ok sobat linknya sudah dipasang silahkan di chek ya.. makasih

    2. Link Tea said...

      Salam kenal juga jeng hana .. linknya segera saya pasang ya

    3. Dofollow Blog Community said...

      Yups sob.. blog saya dofollow nih

    4. Hanna Pertiwi said...

      @Saung Web:
      Terimakasih banyak sob, ntr saya cek. Lagi lambat loading ini jaringannya. Terimakasih banyak loh

    5. Hanna Pertiwi said...

      @Link Tea:
      Terimakasih mas ya, di tunggu, salam kenal juga mas

    6. Anonymous said...

      Blognya dofollow sob.. linknya segera saya masukan di dofollow blog community ,, agar visitor tahu blognya dofollow pasang logo dofollow comunitynya sob.. silahkan copas aja. trus agar orang seneng berkomentar.. kalau bisa formatnya ganti juga dengan yg pake Name/Url, jangan pake Account google atau OpenId .. semoga bisa membantu

    7. Anonymous said...

      Halah kalau komenntnya pake Open Id ribet amat mesti 7 kali klik tuh.. kalau koneksi lambat .. wah pada kabur yg mau koment juga sob.. hehe

    8. Hanna Pertiwi said...

      @Linktea : Terimakasih sob, nanti saya copy logonya dan saya pasang di blog ini. Sarannya sudah saya laksanakan dengan mengubah format komentarnya, thanks sekali lagi sob

      @Saungweb : Iya sob, sarannya bagus, sudah saya ubah kok biar kalo koneksi lambat tetap bisa berkunjung (halah..PD amat ya,hehe)

    9. Rizkyzone said...

      cocok sob blog q juga dah tak pasang, salam kenl juga

    10. Hanna Pertiwi said...

      @Rizky2009:
      Terimakasih sob kunjungan dan follow-nya, nanti saya follow balik ya

    11. non inge said...

      wah... bisa utak atik nie

      thx for share ^^

      kunjungan balik & sekalian follow yah ^^

    12. Hanna Pertiwi said...

      @inge/cyber dreamer :
      terimakasih mbak kunjungannya, iya saya follow balik ya mbak..

    13. tovarossi said...

      ok juga share infonya, thanks sobat.
      btw... sebagai bentuk persahabatan link blognya udah nampang diblogq. sukses selalu n tetap semangat....

    14. pakde sulas said...

      ha ha ha.... mana tepung rotinya? guyon guyon,, kadang kadang pakde juga heran dengan istilah istilah yang dipakai para blogger, seperti istilah bread crumb ini, kebetulan pelanggan pakde sering minta dibelikan ini untuk bahan membuat roti.

      maju terus pantang mundur, buat posting asal manfaat jangan pedulikan blogger lain sudah buat yang penting kita buat dengan "kita punya gaya"

      moga sukses selalu

    15. Hanna Pertiwi said...

      @pakde sulas :
      iya nih pakde, banyak istilah yang saya juga masih banyak belajar. Sarannya akan saya coba pakde, posting dengan gaya kita, tapi postingan saya diatas sudah dengan gaya saya kan?hehehe..
      Saya ingin berusaha menjadi diri saya sendiri pakde, hehe..

      Pokokna matur nuhun pakde

    16. NURA said...

      salam sobat
      wah saya belum pernah buat navigasi ini mba Hanna.
      trims sudah diberikan caranya.
      bisa dicoba nanti.

    17. Hanna Pertiwi said...

      @NURA :
      Silahkan mbak, trimakasih kunjungannya mbak..

    18. NURA said...

      salam sobat
      sip nich membuat menu navigator sederhana,,
      saya nanti akan mencoba juga mba Hanna.
      trims sudah berbagi ilmunya.

    19. bersediabelajar said...

      thx utk infonya, msh hrs dipelajari ilmunya, maklum msh newbie, salam kenal, http://www.bersediabelajar.blogspot.com

    20. Dewi indah said...

      Salam, bro kenapa bread blog aku belum ke index m om google ya help me.Salam, bro kenapa bread blog aku belum ke index m om google ya help me.

    21. Tekim ZOne said...

      kebetulan template saya blm ada dreadcrumb nya

      ijin kopi kode nya ya sob

      utk template blog saya..trimakasih

    22. I Komang Susena said...

      ijin sedot gan..hehe maklum baru belajar..

    23. florist di wonosobo said...

      Saya coba praktekan dulu, terimakasih

    24. US News said...

      I actually still cannot quite assume that I could always be one of those studying the important tips found on your site. My family and I are sincerely thankful for your generosity and for presenting me the chance to pursue my own chosen career path. Thanks for the important information I got from your web page.

    25. Cara Memberikan Nutrisi Bagi Kulit said...

      updateterus gan info2 yg bermanfaatnya
      terimakasih banyak
      sukses terus

    26. Cara Mencegah Penuaan Dini said...

      nice post gan
      mantep nih informasinya
      terimakasih banyak, sukses terus

    27. Obat Sipilis said...

      Good artikel

    28. Obat kutil kelamin said...

      baru kali ini nih gan aku ngebaca artikel yang sangat bagus,ditgu ya yg artikel selanjutnya..!!

    29. Obat sipilis said...

      Nice post gan, sangat membantu



    Bagaimana Menurut Sobat Mengenai Artikel : "Cara Membuat Menu Navigasi Sederhana (Breadcrumb) di Blog" Di Atas?

    Merupakan anugerah tak terkira kepada sobat yang telah memberikan ulasan terhadap tulisan Hitam Putih Kehidupan disini.

    Blog ini menggunakan sistem DOFOLLOW sebagai apresiasi terhadap kunjungan sobat. MOHON MAAF, komentar yang bersentuhan dengan PORNOGRAFI, SARA, SPAM, dan IKLAN, akan kami DELETE...

    Dimohon juga jangan meletakkan link di halaman komentar, karena otomatis akan kami DELETE..