Menu Horizontal

Home » Tips Blog » Menu Horizontal

Menu Horizontal

Posted by Unknown July 17, 2012 2 comments

Tak usah dijelaskan apa itu Menu Horizontal? Karna saya pikir sobat blogger semua pasti sudah tahu.Tips untuk membuat menu horizontal ini sebenarnya bertebaran cukup banyak di Google, jadi tips dari m-technogi ini merupakan salah satu tambahan referensi sobat blogger untuk membuat menu horizontal di blog secara sederhana dan mudah.Karna saya akan sesering mungkin menerbitkan "~~postingan~~" agar blog ini selalu berkembang.Langsung saja ke ~~TKP~~ dibawah ini !!

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!

Cukup mudah bukan !! skian semoga bermanfaat :)

2 comments:

Septi IkaJuly 17, 2012 at 11:13:00 PM GMT+7
*mabok kod*
ah,aku trimo rasah di aeng2 nek ndadak ngurusi kode kaya ngono -______-"
ReplyDelete
Replies

Add comment

Janga lupa KLIK juga tomblo G+ yang ada di pojok kanan atas :D

Dan berkomentarlah yang baik dan NO SARA, NO SPAM, dan sebaiknya jangan menggunakan account "anonim"

Menu Horizontal

Related Post:

2 comments: