Membuat Horizontal Menu

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:



atau sebagai contoh horizontal menu yang asli dan bisa di klik, kunjungilah blog ini

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.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;
}

3. Kalau Sudah Cari Code dibawah Ini:

<div id='header-wrapper'>
<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='http://forantum.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.

7. udah selesai lalu simpan.....

Categories: Trik Blogger