8.3.14
52
Mengubah Breadcrumb Menjadi Menu Navigasi - Seperti yang sudah kita kenal, breadcrumb bisa dikatakan sebuah menu navigasi SEO yang defaultnya untuk menampilkan URL HomePage | Tag label | Judul artikel yang pada umumnya terletak sebelum atau diatas judul posting seperti ini

Menu Navigasi Breadcrumb

Jika pada elemen Template kodenya kurang lebih seperti ini

<div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumb'>
        <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;'> &#187; </b:if>
            </b:loop>
        </b:if> &#187; <data:post.title/>
    </div>
</b:if>

Jika kita perhatikan kode <div class='post hentry'>, berarti kode ini untuk menampilkan halaman post pada blog, dan tepat dibawahnya adalah kode elemen HTML yang telah dibangkus dengan tag kondisional untuk menampilkan tautan navigasi breadcrumb yang letaknya sudah disetting tepat diatas judul post atau artikel.

Apakah kita bisa mengubah menjadi sebuah menu navigasi ?
jawabannya tentu saja bisa, dengan memanfaatkan potition-fixed kali ini saya akan coba memindahkan kode tersebut tanpa mengubah struktur elemen HTML breadcrumb diatas menjadi sebuah menu navigasi melayang, saya hanya mengganti atribut class='breadcrumb' dengan class='alaihumcrumb' tentunya dengan sedikit bantuan kode CSS

Saya tidak akan memberikan Varian kode HTML yang rumit buat sahabat pecinta SAHABAT BLOGGER 77, cukup salin struktur HTML breadcrumb berikut ini


<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumb'>
        <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;'> &#187; </b:if>
            </b:loop>
        </b:if> &#187; <data:post.title/>
        <span class='kanan'>
            <script type="text/javascript">
var homepage = "http://URL-Anda.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<select onchange="window.open(this.value);"><option selected disabled>DAFTAR ISI</option>');
    for (var i = 0; i < label.length; i++) {
        document.write('<option value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
    }
    document.write('</select>');
}
</script>
        </span>
    </div>
</b:if>

PENJELASAN
  1. Ganti http://URL-Anda.blogspot.com dengan alamat blog anda
  2. Hapus kode yang saya beri warna MERAH, dan gantikan dengan kode ini
  3. <div class='alaihumcrumb'>
  4. Kemudian, cari kode <a expr:name='data:post.id'/> lalu letakkan kode HTML yang sudah anda copy tepat diatasnya
  5. Tahap selanjutnya mengubah breadcrumb menjadi menu navigasi dengan CSS berikut


.alaihumcrumb {
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  background:#333;
  width:98%;
  color:#ccc;
  border-bottom:2px solid #999;
  padding:1px 1% 1px 1%;
  -webkit-box-shadow:0 0 7px #000;
  -moz-box-shadow:0 0 7px #000;
  box-shadow:0 0 7px #000;
}

.alaihumcrumb a,
.alaihumcrumb a:visited,
.alaihumcrumb a:active {
  color:#fff;
}

.alaihumcrumb span.kanan {
  float:right;
}

PENJELASAN
  1. Untuk kode CSS letakkan diatas kode ]]></b:skin>
  2. Pada kode ini saya menambahkan letak menunya dengan fixed (Posisi Melayang)
  3. Semua kode diatas sudah saya lengkapi dengan satu menu tambahan yaitu DAFTAR ISI dengan efek select icon sebagai BONUS buat sahabat semua, hehe.!! (ucapan terima kasihnya mana.??) dan letaknya sudah saya tata disebelah kanan menu, selebihnya anda boleh menambahkan lagi beberapa menu sesuai keinginan
  4. Sebelum disave, PRATINJAU terlebih dahulu, jika tampilan menunya sudah OK, terakhir Simpan Template anda



DEMO SHOW



INFO -
Ada 2-3 kode <a expr:name='data:post.id'/>, agar anda tidak pusing meletakkan kode HTML diatas, langsung aja temukan kode yang terakhir.
Bersama SAHABAT BLOGGER 77 kodenya pasti enak buat di costum, hehe..!! SELAMAT MENCOBA

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengubah Breadcrumb Menjadi Menu Navigasi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

52 komentar

  1. pertamax enggak ya... makasih artikelnya sekarang tau cara Mengubah Breadcrumb Menjadi Menu Navigasi

    BalasHapus
    Balasan
    1. silahkan diambil pertamaxnya mas, khusus buat tamu pertama,hehe
      terimakasih kembali

      Hapus
    2. saya gak dapat pertamaxnya yang penting absen dulu mbak disini :D

      Hapus
  2. Balasan
    1. sebenarnya lama mas,hanya dikembangkan sedikit,hehe
      terimakasih sudah berkunjung mas

      Hapus
  3. Tutorial yang bermanfaat nih Mbak Ade, saya coba yah agar Breadcrumb
    Blog saya menjadi Menu navigasi. terima kasih atas tutorialnya, *salam

    BalasHapus
  4. Baru diUpdate ya mbak devy, saya ingin sih membuat menu navigasi seperti itu, namun pada template saya ternyata sudah ada menu seperti itu tersendiri, terima kasih atas artikelnya ya mbak, semoga terus sukse dan mbak tetap akan menjadi inspirasi saya

    BalasHapus
    Balasan
    1. saat ini mungkin semua template sudah dilengkapi dengan menu breadcrumb default seperti gambar diatas, dengan CSS saya mengubah tampilannya menjadi navigasi fixed diatas header, tetapi template mas sudah dilengkapi dengan breadcrumb melayang seperti DEMO SHOW,
      waw..bagus banget mas templatenya, belum dibuat sudah tersedia saat template di download,

      Hapus
  5. klo yg beginian..ane gak trlalu paham mba,..maklum tinggla copas aj..heheh,.. (h) tp salut,,buat artikelnya..tambah wawasan lgi..

    BalasHapus
  6. saya hampir ketinggalan dengan ilmu scrip ini, langsung di bookmark dulu biar ga lupa :)
    thanks mbak Devy yan makin.... :)) makin apa hayooo ??

    BalasHapus
    Balasan
    1. hayoo.....cling,,menghilang dech
      hehe

      Hapus
  7. cukup menarik juga tutorial nya mbak nanti saya mau cobain juga dan akan di kembangkan terima kasih sudah berbagi mbak .. :D

    BalasHapus
  8. Wah sangat bermanfaat sob.. nambah ilmu nih

    BalasHapus
    Balasan
    1. bersama sahabat blogger 77 pasti selalu dapat ilmu baru,hehe
      terimakasih sudah berkunjung mas

      Hapus
  9. ijin nyimak aja deh tutorial Mengubah Breadcrumb Menjadi Menu Navigasi nya .
    soalnya di blog saya sudah ada breadcrumbnya :)
    #kunjungan perdana mbak dan salam kenal

    BalasHapus
    Balasan
    1. iya mas,itu breadcrumb bawaan template yang umumnya terletak diatas judul post, sehingga tampilannya saya pindahkan melayang diatas header blog

      Hapus
  10. Bisa di edit ya breadcrumb di template, kirain saya udah bawaan templete blog aja.. [-(

    BalasHapus
    Balasan
    1. bisa mas,karena kodenya hanya terbungkus tag kondisional yang menyisipkan kode CSS untuk pengaturannya,
      sehingga kita bisa sesuka hati mengedit tampilannya, seperti saya mengedit tampilannya menjadi menu melayang diatas header,dan sedikit saya tambahkan menu DAFTAR ISI model selec icon

      Hapus
  11. ahh ribet banget sis...
    heheh

    tapi boleh juga dicoba...ntar kalau sudah selesai pengumuman kontes...
    otak atik takut anjlok serp

    BalasHapus
    Balasan
    1. belum biasa kali mbak,jadinya terasa ribet nyusun kodenya,hehe

      semoga kontesnya berhasil ya mbak
      amin

      Hapus
  12. untung mampir kesini, jadi nambah ilmu soal braedcrumb yang lain dari biasanya...keren nih, ijin simpen ah, mo dipasangin di blog yang lainnya ah

    BalasHapus
    Balasan
    1. wadduh punya blog berapa neh kang,,jangan-jangan ada 10 blog lagi,heh
      gak pusing urusinnya kang

      Hapus
  13. Keren nich mbak devy

    breadcrumb blog saya sudah kayak gini gak ya.... :)

    BalasHapus
    Balasan
    1. sedikit keren mas, karena bahasa markup pada breadcrumb HTML itu dapat kita pindah-pindahkan,jadi ada sedikit ide untuk membuatnya menjadi melayang diatas header dengan sedikit tambahan menu DAFTAR ARTIKEL semakin keren dah,,
      hehe

      Hapus
  14. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  15. jadi lebih menarik ya mbak kalau dibuat gtu

    BalasHapus
  16. jarang sekali blog yang menampilkan fitur DAFTAR ISI yang tampak bergabung dengan breadcrumb secara berdampingan dalam 1 menu, sehingga saya membuatnya agar telihat sedikit lebih istimewa tentunya,hehe

    BalasHapus
  17. Dapat ilmu baru..
    terima kasih infonya sangat bermanfaat

    BalasHapus
  18. Mbak, saya mau dah nulis di blog mbak jd kontributor. tapi nggak bahas tutorial sih. kalo itu mah ane nyerah dah. hihihi
    gimana? sepsum10@gmail.com

    BalasHapus
  19. Mbak, saya mau dah nulis di blog mbak jd kontributor. tapi nggak bahas tutorial sih. kalo itu mah ane nyerah dah. hihihi
    gimana? sepsum10@gmail.com

    BalasHapus
    Balasan
    1. seharusnya saya yang menawarkan,tetapi kok malah kebalik ya,hehe
      bukannya gak mau mas, kalau mas jadi penulis di blog ini ntar ciri khas SAHABAT BLOGGER 77 tidak tentang tutorial lagi nice blognya,

      saya lagi membuat blog tentang tema diskusi mas, karena banyak yang kirim email untuk optimasi blog, jika mas mau bergabung di blog yang itu saja,gimana?
      blognya belum saya terbitkan,masih dalam tahap membuat rangka templatenya, ntar kalau sudah rilis saya hubungi mas ya.

      Hapus
  20. Keren ya mbak..dapat tambahan ilmu lagi saya mau coba pelan2 ah..biar blog makin keren dan makin joz
    makasih ya mbak

    BalasHapus
  21. terima kasih mbak sudah berkenan berkomentar di blog saya. terima kasih juga ya tips nya. hehehe.

    salam kenal juga... ada baik nya la kalau kita saling follow biar menjalin pertemanan n biar saya bisa lebih belajar lagi dari mbak. hehehe

    http://www.bang-yobi.com

    BalasHapus
  22. mantap mbak,,,
    sedikit banyak bisa menambah wawasan blogging,,,,,

    BalasHapus
  23. Mantep nih blog nya banyak tutorial nya,,,,
    Dari template nya juga bagus :)

    BalasHapus
  24. CARA BIKIN KOLOM KEMENTAR SEPERTI BLOG INI BAGAIMANA MANA YAH! INFO NYA DHONG... MAKLUM NEWBE!!!

    BalasHapus
    Balasan
    1. pengaturannya ada pada kode CSS template blog yang mas gunakan, coba cari saja pembangun CSS yang mengatur tentang form komentar, karena bentuk kolom komentar pada template berbeda-beda mas, jika ingin seperti ini, berarrti kode CSS-nya harus dihapus dan diganti dengan CSS komentar yang ada pada blog ini

      Hapus
  25. link back nya sudah saya masukan di blog saya..www.johanespratomo.co.nr gan.terima kasih atas ilmunya..

    BalasHapus
  26. gan.saya masih bingung cara buat tombol navigasi di blog saya gan :o

    BalasHapus
    Balasan
    1. maksudnya menu navigasi kali ya mas.!

      Menu Navigasi

      Hapus
    2. mbk di blog edit HTML saya tidak ada yg tulisan wrapper dan breadcrumb..

      Hapus
    3. bukannya tidak ada gan,tetapi agan belum membuatnya, karena agan masih menggunakan template default blogger yang belum di dukung dengan breadcrumbs

      Hapus
  27. mbk tolong di buka email nya.saya kirim pesan disana..

    BalasHapus
    Balasan
    1. kalau kita membahas hal ini melalui email dan saling kirim balasan, akan semakin sulit cara mempelajarinya gan, kan kalau langsung berkaitan dengan topik yang akan dibahas lebih cepat paham,

      silahkan tanyakan saja lewat kolom komentar ini gan

      Hapus
  28. saya krim pesan di III-888@yahoo.co.id apa benar itu emailnya anda?kok tidak ada balasan sama sekali??

    BalasHapus
  29. gan kok tidak dbalas se pertnyaan saya itu? @-)

    BalasHapus
    Balasan
    1. mas-nya tanya apa emang sama saya, maaf gan kalau belum sempat membalas kiriman agan via email fb saya, karena saya sendiri sudah jarang sekali membuka fb, hanya sesekali gan.

      sekarang yang mau agan tanyakan itu masalah tutorial apa gan.?

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK