Mengubah Breadcrumb Menjadi Menu Navigasi

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

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
<div class='alaihumcrumb'>
3. Kemudian, cari kode <a expr:name='data:post.id'/> lalu letakkan kode HTML yang sudah anda copy tepat diatasnya
4. 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 >>

http://sahabatblogger77.blogspot.com/2014/03/mengubah-breadcrumb-menjadi-menu-navigasi.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77