Light Hover Horizontal Menu With CSS For Blogger

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :

Cara membuat nya yaitu sebagai berikut :

1. Login Blogger
2. Pilih Rancangan ---> EDIT HTML
3. Kemudian Cari kode:

<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>

4. Simpan kode berikut di bawah kode di atas(Sesuai tema blog anda):

<ul class='v2' id='topnav'>

<li><a href='#' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

NB: Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan..

5. Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya:
 

<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LgKYOX3sJZ4OcDJXWmwISYF3ZTzeuosYMh5zpbARkeuDEZqz6V2lB2Q4ay-OxAHdy2UHfkquGqvDInRonmZikeRh9I1bX5SfVaLUzvI-WDYE4DV7mzUuPDkUDMDTKpOKYvwS5N2psqCE/) 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>

6. Save

Related Post