Menambahkan Menubar pada Blogger

Menubar adalah sarana navigasi pada situs web yang berisi daftar tautan/link. Menubar umumnya terletak mendatar pada header, baik dalam posisi menggantung (di bagian bawah) maupun persis di atas header seperti ini:

Menubar

Menubar

Secara default layanan Blogger tidak menyediakan menubar pada templat-templat blog mereka. Mereka hanya menyediakan link list dan archive list yang terletak pada sidebar secara vertikal. Keberadaan menubar pada header memang tidak mutlak diperlukan, namun kalau ada akan membuat tampilan blog anda terlihat sedikit lebih ‘profesional’. Artikel ini menyingkap cara mudah membuat menubar sederhana pada blog anda di Blogger.

Pergilah ke halaman pengeditan html blog anda (Dashboard > Layout > Edit HTML)

Tambahkan baris kode berikut pada templat CSS blog anda tepat di bawah kode untuk header:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Kini scroll ke bawah tampilan kode hingga anda menemukan blok kode berikut:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>

Selipkan baris kode berikut tepat di bawah <div id=’header-wrapper’>:

<b:section class=’menubar’ id=’menubar’ maxwidgets=’1′ showaddelement=’yes’>
<b:widget id=’LinkList2′ locked=’true’ title=’Menubar’ type=’LinkList’/>
</b:section>


hingga secara keseluruhan akan menjadi seperti ini:

<div id=’header-wrapper’>
<b:section class=’menubar’ id=’menubar’ maxwidgets=’1′ showaddelement=’yes’>
<b:widget id=’LinkList2′ locked=’true’ title=’Menubar’ type=’LinkList’/>
</b:section>

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>

Penjelasan:

Setiap blok script yang diawali dan diakhiri dengan tag <div id=’’> … </div> mewakili sebuah widget pada blog anda di Blogger. Baris kode warna merah adalah script tambahan untuk menempatkan menubar pada widget header.

Setelah selesai, klik “Save Change” untuk menyimpan perubahan yang anda lakukan. Kini anda dapat menemukan elemen menubar tepat di atas header blog. Untuk mengedit menubar (menambahkan/mengurangi link dsb) pergilah ke halaman Page Layout seperti biasa.

23 Balasan ke Menambahkan Menubar pada Blogger

  1. tofiq mengatakan:

    kuk gagal terus mas ta cobain class itu yang mana penulisan yang benar gimana div nya ditambah atau gimana mas

  2. All-Bali mengatakan:

    Makasih informasinya…
    Salam
    All-Bali

  3. agung mengatakan:

    ngga ngerti bahasanya susah banget

  4. Kojak mengatakan:

    makasih utk tutrialnya
    sangat terbantu

    silahkan mampir kpn2………http://blazeptc.blogspot.com

  5. Rudyarea mengatakan:

    Makasih atas infonya Mas.
    Salam knal dari seorang yang sederhana…

  6. wawan mengatakan:

    wah masih bingung
    kode untuk header yang mana ya mas maklum masih pemula

    • Hermanu mengatakan:

      Daripada bingung, search en download aja templat gratis yg udah jadi via Google. Di internet ada banyak Mas😉
      Tinggal pake keyword “free blogger template” di Google. Ngedit templat sendiri itu cuma “prakarya” buat yang suka iseng atawa pengen mendalami kode CSS

  7. Irwin Hosh mengatakan:

    Thanks Yaw…. Salam Kenal

  8. agung mengatakan:

    waaaah manfaat banget nih menu bar

  9. sofyanc04 mengatakan:

    makasih infonya, bagus benget!

  10. zil is arsyi mengatakan:

    trims banget ni atas infonya…
    walaupun susah banget buat dimengerti..
    akhirnya bisa juga

  11. loeboekaloeng mengatakan:

    makasih mas ilmunya

  12. rakha wahyu mengatakan:

    makcih bozzzzz…!
    sangat membantu, menambah pengetahuan…
    boleh duong mampir ke. http://linkartanimation.blogspot.com
    salam kenal

  13. ahmad Os mengatakan:

    Makasih ya atas informasinya..

  14. Isak Muliana mengatakan:

    Info sangan bagus, walaupun sedikit kudu mikir waktu implementasinya, karena ga bisa langsung copy paste jalan… he he he… ^_^

    Anyway, thx for sharing…

  15. Rahasia masa depan mengatakan:

    perasaan saya tiap kali googling pake keyword seputar modifikasi blog/web selalu ajah ketemu blog mas..
    hohooh..
    tapi emang infonya bagus2 neh..
    ^^

  16. nuryamin mengatakan:

    thank’s banget ye informasinya…..

  17. anakutbanjar mengatakan:

    silahkan klik untuk mendownload 3GP player

  18. Daus Cantik mengatakan:

    Wah, kalau aku saat upgrade template baru, Sudah ada, mas. Tinggal diatur saja. Kalo nggak salah nama gadget yang disediakan adalah “LINK BAR”. Itu sudah bawaan langsung dari template tersebut.

    Jadi, nggak susah payah lagi deh mikirin menu navigation segala😄

  19. udah dicoba dan tidak berhasil coz masih pemula n binggung banget..
    by the way thank atas tipsnya..

    butuh materi ISO, HSE, HRD datang langsung ke gudangnya
    di http:qms-center.blogspot.com

%d blogger menyukai ini: