Membuat Horizontal Menu di blog 2

horizontal menu
Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    /* navbar
    ================== */

    #bg_nav {
    background: #ffffff;
    width: 850px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #000000;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #ffffff;
    overflow: hidden;
    }
    #bg_nav a, #bg_nav a:visited {
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }

    #bg_nav a:hover {
    color: #000000;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }

    #navleft {
    width: 500px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #navright {
    width: 220px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }
    #navright a img {
    border: none;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }

    #nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #nav a, #nav a:visited {
    background: #ffffff;
    color: #000000;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #ffffff;
    }
    #nav a:hover {
    background: #c06000;
    color: #000000;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    }

    #nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 150px;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #c06000;
    padding: 7px 30px 7px 10px;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #nav li:hover ul {
    left: auto;
    display: block;
    }
    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

Catatan :
  1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau.
  2. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna disini---> Mengetahui Kode Warna

  • Kemudian cari kembali kode seperti di bawah ini.

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'
    showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test
    (Header)' type='Header'/>

    ... dan seterusnya ...

    </b:section>
    </div>

  • Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna kuning (sesuaikan dengan template blog kamu).

    <div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

    <div id='navright'>

    <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
    </form>

    </div>

    </div><!-- akhir bg_nav -->

  • Jangan lupa disimpan

Oia, baca juga postingan saya yang lama tentang Membuat Horizontal Menu


Selamat membuat menu horizontal...

Sumber: Kolom-Tutorial.blogspot.com & Optimasi-Blog.blogspot.com

21 komentar:

  1. hm....
    pengen nyoba ikh...
    tapi bikin loading blog nya jadi lama gk sih???\
    makasih ya info nya....

    BalasHapus
  2. @ camera: Enggak koq, dicoba dulu aja....

    BalasHapus
  3. Link Dan Bannernya Sudah Saya Pasang Mohon Pasang Kembali Link Saya Junior Blogger

    BalasHapus
  4. Keren nih, kunjungi saya juga ya di sini

    BalasHapus
  5. aslkm, mo nanya dikit nich mas. buat horizontal menu itu saya udah bisa cuma saat disorot akan muncul dropdown menunya tapi belum sempat diklik dropdown menunya sudah hilang.kasih solusinya mas.... saya tertarik dengan menu horizontal blog mas, bila disorot pakai kursor langsung muncul dropdown yang mau kita pilih tanpa takut khilangan seperti menu pada blog saya

    BalasHapus
  6. @ Muhammad: Coba pkai tutor yg ini: http://forantum.blogspot.com/2010/05/membuat-dropdown-pada-horizontal-menu.html

    BalasHapus
  7. saya buat menu horisontal seperti langkah-lankah ini ko menunya gak bisa ditambah cuma sampe 6 aja gak bisa lebih...

    mohon bantuannya mas...

    BalasHapus
  8. mas mau tanya lagi..

    #bg_nav {
    background: #ffffff;
    width: 850px;

    kode css diatas saya ganti dgn kode :


    #bg_nav {
    background:url(http://4.bp.blogspot.com/_kMUpUqMmduA/SUHmxgCyLnI/AAAAAAAAAfQ/9qDgdJmOOz0/s1600/bg-nav-2.gif);
    width: 100%;

    untuk background menu horisontalnya tapi ko ada garis putus-putus y.. gak seperti punya mas ini...

    mohon bantuannya mas...

    maaf nih mas banyak bertanya....hehehe

    BalasHapus
  9. saya sudah coba menu seperti ini, tapi sepertinya saya gagal. Saya menggunakan Tempalte Designer Baru, ketika saya buat, layar submenunya sembunyi dibawah postingan, seharusnya layar menunya khan diatas layar postingan..bantuin dong om

    BalasHapus
  10. Salam kenal. Saya baru dalam dunia blog. Tertarik dgn menu horizontal dan sudah berhasil membuatnya. Hanya saja....mengapa hasil postingan selalu masuk dalam setiap menu ? Mohon bantuannya.

    BalasHapus
  11. Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna kuning (sesuaikan dengan template blog kamu).

    maksd na yg berwarna kuning yg mana?

    BalasHapus
  12. sangat membantu dan mudah dimengerti

    BalasHapus
  13. berhasil-berhasil horreee,
    tp msh jelexx
    but.. mksh yaaa

    BalasHapus
  14. saya sudah pasang menu horisontal di blogku. tapi hanya dibatasi 5 kategori.. mohon bantuanya ya...

    BalasHapus
  15. kingyosua_aferi@ymail.com13 Juni 2011 pukul 20.48

    gan ketika saya buat tuw menunya , layar submenunya sembunyi dibawah postingan, seharusnya layar menunya khan diatas layar postingan.

    gimana itu gan

    sent ke mail:
    kingyosua_aferi@ymail.com

    BalasHapus
  16. tolong dong, mungkin tampilan mengedit blog skrg berbeda, saya tidak menemukan rancangan/yg lainnya, dulu sih ada.. tapi skrg udah ane cari kagak ada.. ada yg bisa bantu ?

    BalasHapus
  17. cukup panjang juga ya scriptnya
    btw terima kasih atas ulasannya

    BalasHapus
  18. Makasih ya mas.. patut di coba ini

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.