Cara Membuat Menu Horizontal Blog secara Mudah

Rabu, 04 April 2012

Menu horizontal atau Horizontal Menu adalah sebuah menu navigasi yang terdiri dari kumpulan link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Selain mempercantik tampilan header blog, menu navigasi horizontal ini akan mempermudah pengunjung dalam mengakses informasi yang tersedia di blog kita.

Tips untuk membuat menu horizontal ini sebenarnya bertebaran cukup banyak di Google, jadi tips dari Tutorial Blog Pemula ini merupakan salah satu tambahan referensi sobat blogger untuk membuat menu horizontal di blog secara sederhana dan mudah.

Berikut ini langkah- langkah membuat menu horizontal secara sederhana dan mudah :

· Login ke akun blogger sobat seperti biasa

· Pilih Tata Letak à Edit HTML, jangan lupa untuk selalu member centang pada Expand Template Widget, untuk menghindari error dan hal yang tidak diinginkan, pastikan sobat mem- backup template terlebih dahulu

· Cari kode ]]></b:skin>, kemudian paste kode berikut ini tepat di atas ]]></b:skin>

/* 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;
    }

· Kode berwarna merah adalah kode- kode yang terdiri dari kode warna dan angka ( lebar-tinggi/ width-height ) yang bisa sobat ganti dan sesuaikan dengan spesifikasi template sobat.

· Cek kode warna disini.

· Belum selesai sampai disitu, sekarang sobat cari kode sbb. :

………………………………

dan seterusnya hingga……

</b:section>
</div>

· Paste kode berikut ini tepat dibawah kode berwarna merah </b:section> atau </div>, pilih salah satu mana yang sesuai dengan template sobat :

<div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat Blog Sobat /'>home</a></li>
    <li><a href='http://Link 1’>Judul Link 1</a></li>
    <li><a href='http://Link 2'>Judul Link 2</a></li>
    <li><a href='http://Link 3>Judul Link 3</a></li>
    <li><a href='http://Link 4'>Judul Link 4</a></li>
    </ul>
    </div>
    </div>

    <div id='navright'>

    <form action='http://Alamat Blog Sobat/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>

· Silakan sobat ganti kode berwarna merah sesuai dengan keterangan sesuai yang tertera pada blog sobat

· Simpan!

Kode- kodenya sih cukup panjang ya sobat, tapi pas praktek nanti ternyata tidak seribet kodenya kok. Sekian dulu ya postingan mengenai Cara Mudah Membuat Menu Horisontal di Blog. Semoga bermanfaat!