Sunday, March 25, 2012

Cara Buat Menu Navigasi Breadcrumb

Cara Membuat Menu Navigasi Breadcrumb,Breadcrumb,Navigasi Breadcrumb,Menu Navigasi Breadcrumb

Salah satu cara untuk meningkatkan navigasi sebuah blog adalah dengan menambahkan breadcrumb navigasi di blog sobat blogger. Mamfaat SEO dalam memasang breadcrumb adalah sebagai bagian dari teknik improvivasi navigasi untuk memfasilitasi Search Engine Optimization. Dalam tutorial ini, Rinjani Lovers akan memandu sobat blogger untuk menambahkan breadcrumb navigasi di blog sobat blogger. Tapi sebelumnya baca dulu ulasan singkat tentang navigasi Breadcrumb di bawah ini.

Breadcrumbs adalah nama yang diberikan untuk link navigasi yang biasanya ditampilkan di atas judul atau title posting di blog dan di bagian atas halaman. Breadcrumbs menyediakan sarana tambahan di mana visitor atau pengunjung blog dapat dengan mudah melakukan navigasi situs atau blog kita. Pada umumnya, Breadcrumbs menampilkan Halaman Depan atau home > Label> Judul Posting.

Cara Membuat Navigasi Breadcrumb di blog :
  • Sign In terlebih dahulu di www.blogger.com
  • Dari Dasboard sobat klik Design dan Edit HTML
  • Back Up dulu template sobat
  • Kasih tanda centang pada Expand Widget Templates
  • Paste kode di bawah ini dan letakkan setelah kode <b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
  • Kemudian, temukan kode ]]></b:skin>
  • Kalau sudah ketemu, letakkan kode berikut di atasnya :
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
  • Kalau sobat blogger sudah melakukan kedua proses di atas, simpan template sobat. Lalu sobat buka salah satu postingan sobat. Menu navigasi Breadcrumb pasti akan terlihat atau muncul.
Apa penyebab Menu navigasi Breadcrumb tidak muncul di blog? Jawabannya adalah "Sobat blogger belum membuat Label di setiap postingan sobat. Jadi, sobat blogger harus melebelkan dulu semua posting blog sobat sebelum memasang Menu navigasi Breadcrumb.


Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



15 comments:

  1. top markotop juragan,,,, udah ane coba and berhasil.....
    makasih banyak gan......
    kalo deket ane kasih cendol deh
    hehehe......

    ReplyDelete
  2. gan mau nanya lw buat kya agan yg di label tu gmna gan
    thax

    ReplyDelete
    Replies
    1. Faruq...
      Setiap nulis postingan atau artikel,
      Buat kategori atau label untuk artikel tersebut.
      kalau kita menggunakan Old Blogger Interface,
      Label tersebuat berada di bagian bawah tempat kita biasa tulis artikel.
      Kalau kita menggunakan New Blogger Interface,
      Label berada di sebelah kanan.
      Kalau sudah buat label, melalui Dashboard --> Layout --->Add a gadget --->Cari Label.
      Selanjutnya tinggal di sesuaikan saja.
      Kalau msh bingung, tanya saja melalui kolom komentar ini, supaya nanti saya buat artikel tentang masalah ini

      Delete
  3. iya gan lw text nya jdi warna warni gtu gmna? apa dr templates gan, apa ad scriptnya
    thxk gan

    ReplyDelete
    Replies
    1. Faruq Aqois...
      Baca Tutorial untuk buat link warna warni ketika di arahkan crussor disini :
      http://rinjanilovers.blogspot.com/2011/12/efek-pelangi-untuk-link-blog.html

      Delete
  4. sipp dah...
    tuker banner ya...

    bimosuper.blogspot.com

    ReplyDelete
  5. Thanks GAN..
    punya ane WORK..
    sudah cari kesana-kemari..akhirnya template ane cocok ama kode ini.
    SOBATSOFTWARE.net
    makasih sebelumnya...^_^

    ReplyDelete
  6. Mantap GAN...
    udh ane coba n berhasil !
    dua jempol dah.
    Thanks Gan :)

    ReplyDelete
  7. waduh mantaf nich tutorialnya!

    tapi ini untuk blogspot/blogger ya?
    lumayan ribet juga ya kalau untuk blogspot!

    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!

    ReplyDelete
  8. thanks gan infonya.
    tips nya berhasil 100%
    <a href='http://rloren.blogspot.com/2012/08/referensi-blog-nofollow-dan-dofollow.html>Happy Blogging</a>

    ReplyDelete
  9. ternyata script breadcrumbs banyak macamnya, lebih simple dari script yang aku pake
    nuce share mas bro :)

    ReplyDelete
  10. mantap ni infona... aku masih belajar cari tutor kayak gini kesana kemari gak ada yang bisa dipasang, pake script yang ini langsung tokcer.. makasih gan...

    ReplyDelete
  11. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    ReplyDelete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template