Sebelum ke tahap pembuatan saya akan memperlihatkan DEMO PREVIEW untuk Light Hover Horizontal menu ini, silakan KLIK button Dibawah ini :
Untuk membuatnya mari anda ikuti langkah-langkahnya sebagai berikut : 1. Login Ke Blogger Anda
2. Pilih Rancangan
3. Pilih Edit HTML
4. Simpan CSS berikut diatas kode </head>
<style type='text/css'>
#nav {width:100%;margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3eqKBh01jT0aWkmohAE-bTaL4t9n4N9UgylXiIhVGuOnA4o_4_A9araPkyllydKDGI8GcXwBQ_gnGOSOU3cNgiMUgvtEbXTtNo8-xgR_k6tzThMS1lrcIPnYf-CVfxCEw67c9jxE_U21Z/) repeat-x;}
#nav li {float: left; display: block;}
#nav li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;}
#nav li a:hover {background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;color:#ffffff;text-decoration:none;}
ul#nav li.activee a, ul#nav li.current-cat a {color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px; }
#nav li ul {display: none;}
</style>5. Sekarang anda cari kode berikut :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
catatan :
Untuk penyimpanan menu ini, anda tidak diwajibkan menyimpannya dibawah kode diatas saja, anda juga bisa menyimpannya ditempat yang sesuai dengan template yang anda punya.
6. Simpan kode berikut setelah kode diatas
<ul id='nav'> <li class='activee'><a href='/'>Home</a></li> <li><a href='#' title='MENU 1'>MENU 1</a></li> <li><a href='#' title='MENU 2'>MENU 1</a></li> <li><a href='#' title='MENU 3'>MENU 2</a></li> <li><a href='#' title='MENU 4'>MENU 3</a></li> <li><a href='#' title='MENU 5'>MENU 4</a></li> <li><a href='#' title='MENU 6'>MENU 5</a></li> </ul>
Keterangan :
Silakan ganti kata MENU diatas dengan Menu yang akan anda tampilkan, dan yang bertanda # silakan ganti dengan link yang dituju.
Contoh :
<li><a href='http://www.tutorialines.blogspot.com/2010/04/daftar-isi.html' title='content'>Daftar Isi</a></li>7. SimPAN template anda
Kalo anda tertarik, silakan dicoba deh..Semoga bermanfaat
HAPPY BLOGGING