MEMBUAT MENU NAVIGASI HORISONTAL

 

Apa itu menu Horizontal ? Menu Horizontal adalah Menu(Link) Yang berbaris di bawah atau di atas header blog .gunanya adalah untuk membuat menu utama blog.untuk lebih jelasnya silakan liat link menu yang ada di blog saya ini yang ada tulisan Home,jeritan vegasus,the amazing dan lain-lain atau biar lebih jelas silakan kamu liat gambar  di atas..itu salah satu hasil dari MEMBUAT MENU NAVIGASI HORISONTAL dan sekrang kita ikuti langkah langkah nya yang bisa di bilang mudah:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML
2. Lalu taruh code dibawah ini diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog (cari dengan cltr+f)

       .menuhorisontal{
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #000000;
    }

    .menuhorisontal ul{
    margin: 0;
    padding: 0;
    padding-left: 10px;
    font: bold 12px Verdana;
    list-style-type: none;
    }

    .menuhorisontal li{
    display: inline;
    margin: 0;
    }

    .menuhorisontal li a{
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 7px 8px;
    border-right: 1px solid white;
    color: white;
    background: #414141; /*background dari Tabel*/
    }

    .menuhorisontal li a:visited{
    color: white;
    }

    .menuhorisontal li a:hover, .menuhorisontal li.selected a{
    background:#002EB8; /*Background Setelah Pointer Diarahkan */
    }
    #footheader {
    width: 100%;
    float:left;
    margin:0 0 0;
    padding:0 0 0;
    height:35px;
    }

NOTA:seluruh code warna dan lebar bisa kalian ubah sesuai dengan template blog anda




3. Kalau Sudah Cari Code dibawah Ini:
<div id='header-wrapper'&gt;
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
    </b:section>
    </div>

4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:
<div id='footheader'>
    <b:section class='footheader' id='footheader' preferred='yes'>
    </b:section>
    </div>
5. Kemudian Simpan
6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href=&#039;http://inspirationsamurai.blogspot.com'>Kumpulan Tutorial Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>

ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

semoga bermanfaat dari tutorial  MEMBUAT MENU NAVIGASI HORISONTAL
referensi :forum antum