masuk ke dashboard - Rancangan - Edit Html , kemudian letakkan kode berikut diatas kode ]]></b:skin>
/*----------------
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
width:500px;
}
.hoverBtn {
position:relative;
float:left;
background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSgScPrmz07Pcw-Pw7hoeWGq2I7i8IZz4I9Z5bLwmPFneeT6a8stjUChGuZUHLM16wSEkvUgXtPZTXtdgRAKgY3nrLlhMHmCnaGf25bIT0RAhrIwyxiaTKyBbYuLMza-XZOfl8W9lMaI/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/AVvXsEgKG9OEqSUSMUGf4NJUGj8kJ9FkE6aYcMPh7WtzpXIXB2XH3ITlOnsXkDr6O0GkWM3XH8wqvBwAYDAe3JjCy2mAUJCY7ffYz5UQbu8IcY9dd_-jqdWXr4DRtSbF5H-VdvVT0lfqgqNltBc/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/AVvXsEjlSgScPrmz07Pcw-Pw7hoeWGq2I7i8IZz4I9Z5bLwmPFneeT6a8stjUChGuZUHLM16wSEkvUgXtPZTXtdgRAKgY3nrLlhMHmCnaGf25bIT0RAhrIwyxiaTKyBbYuLMza-XZOfl8W9lMaI/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/AVvXsEgKG9OEqSUSMUGf4NJUGj8kJ9FkE6aYcMPh7WtzpXIXB2XH3ITlOnsXkDr6O0GkWM3XH8wqvBwAYDAe3JjCy2mAUJCY7ffYz5UQbu8IcY9dd_-jqdWXr4DRtSbF5H-VdvVT0lfqgqNltBc/s1600/navHover.png) repeat-x 0 0 scroll;
}
kemudian letakkan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>Untuk Memanggilnya silahkan letakkan menunya dibwah Head-Nav ( sesuaikan dengan template sobat)
<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'/>
<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>
Simpan template.
Semoga Cara Membuat Menu Jquery Navigation Color Fading Hover bermanfaat. thanks
reff : Kangdadang
0 komentar:
Posting Komentar