- Cara membuatnya ikuti langkah-langkah berikut :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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/AVvXsEgDNo5hb7vP5jJH6mHfPPONnI8bt6-QTmRyAmdqDxqi0KNNOrKj_CgTHdkEUOFm2wmWEOJtpt4u80l9MmLpCy2cC7JcwvninDooRxYSdTBkVpWJvjev4z4AYWdZspGBe2k4R-HG_CZeloY/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/AVvXsEhGDbyM40h96-lD9rjIszUtVAf4l82cbZfJcbRg9ZWCsrkfkbAfDJD_FotjsyhcYrntgo_IXVgzLM6mAQPKhewfg3s0O7YdPVmv2CN_fwn0jZIXhrC3xPYt3XGbQA94ZPzHM0G2senzsew/s1600/navHover.png) repeat-x 0 0 scroll;
}
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
width:500px;
}
.hoverBtn {
position:relative;
float:left;
background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDNo5hb7vP5jJH6mHfPPONnI8bt6-QTmRyAmdqDxqi0KNNOrKj_CgTHdkEUOFm2wmWEOJtpt4u80l9MmLpCy2cC7JcwvninDooRxYSdTBkVpWJvjev4z4AYWdZspGBe2k4R-HG_CZeloY/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/AVvXsEhGDbyM40h96-lD9rjIszUtVAf4l82cbZfJcbRg9ZWCsrkfkbAfDJD_FotjsyhcYrntgo_IXVgzLM6mAQPKhewfg3s0O7YdPVmv2CN_fwn0jZIXhrC3xPYt3XGbQA94ZPzHM0G2senzsew/s1600/navHover.png) repeat-x 0 0 scroll;
}
4. 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'/>
<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'/>
5. Untuk pemanggilannya, kalau saya disimpan dibawah tag Head-nav (seuaikan dengan template sobat tata letak nya):
Simpan template dan selesai.
Tidak ada komentar:
Posting Komentar