bankolay.com: Cara membuat tab menu horizontal

menambahkan tab menu adalah salah satu cara untuk mempermudah pengunjung untuk membuka beberapa link yang akan di lihat oleh pengunjung. Dan jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blogg agar memberikan layanan kemudahan shortcut link bagi pengunjung blog sobat sekalian.

Ok langsung saja, langkah pertama adalah :

Login ke blogg masing-masing
Tata letak
Pilih edit HTML
Cari kode ]]></b:skin> (untuk mempermudah pencarian kode dengan cara tekan tombil kombinasi ctrl+f)
Jika suda ketemu paste kan scrip di bawah ini tepat di atas kode ]]></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;
    }

Note :

Kode yang di awali # (seperti #ffffff;) itu adalah kode warna.
Sedangkan huruf Widht dan Heigt adalah untuk ukuran menu, yang dirubah adalah angkanya. dan dapat dirubah sesuai keinginan
Untuk mencari kode warna bisa dilihat Di sini

6. Lalu cari kode di bawah ini

Note :

Jika tidak ketemu dengan kode yang di atas. saran kolay coba dengan satu kode yang di atas (contoh <div id='header -wrapper'> atau tanpa tanda < >), lalu samakan dengan scrip yang di atas satu persatu.
Lalu pastekan kode di bawah ini di bawah kode </b:section> dan di atas </div> yang di atas

7. Selesai

11/04/12

Cara membuat tab menu horizontal

Tidak ada komentar:

Posting Komentar