+==xXx(EXPLORATION)==+==xXx

Home » Tips Blogger » Jquery Navigation Color Fading Hover

Jquery Navigation Color Fading Hover

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/*----------------
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
   width:500px;
}

.hoverBtn {
   position:relative;
   float:left;
   background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfTGQIga6_9RM-z3Sya15JNAyx8cfCghNQAhvYeOqMaf12qDIYoGhQHTUuORwW0_36HI3XzB62jvBJbYNU9fNPyfPTsVt7LesANqO7Xzc-TxbrzAetgF50hfF0exuXFPkkS5K4eA0xm8/s1600/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {
   position: relative;
   z-index:2;
   display: block;
   width:100px;
   height:30px;
   line-height:30px;
   text-align: center;
   font-size:1.1em;
   text-decoration:none;
   color:#000;
   background:transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
   display:none;
   position:absolute;
   z-index:1;
   top:0px;
   background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyp5rMQQVbiSnecURj8Lk8FHVTvDvCcVyW-ZfBRbd1Nh5HiNpFvLor9ZFsHVS0zsCNBbWMI-dM2qpkFXXFK7_N05zTi_F6vjfuwGVPtfLYqFKokKN3apW6gYGLhBYUbnywtaj88tHE-qc/s1600/navHover.png) repeat-x 0 0 scroll;
}

8. Simpan script berikut diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jquery.color.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/main.js' type='text/javascript'/>

9. Save
10. Untuk pemnggunaannya, kalau saya disimpan dibawah tag Head-nav (seuaikan dengan template sobat tata letak nya):

<div id='pageBody'>
<a class='hoverBtn' href='#'>Home</a>
<a class='hoverBtn' href='#'>Mobile</a>
<a class='hoverBtn' href='#'>Tutorial</a>
<a class='hoverBtn' href='#'>About</a>
<a class='hoverBtn' href='#'>Contact</a>
</div>