Home
jQuery Background Right left effect jQuery Background Right left effect
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* ---------------
jQuery Background Right left effect
---------------------------------- */
#Rightleft {
list-style:none;
margin:0;
padding:0;
}
#Rightleft li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
#Rightleft li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
#Rightleft li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#Rightleft a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJIJulzebKwATK35dhFtmFQARNFhYHngCf70wC9k1nK6pVQUoGYymPKRmjDt0AQ00-LpFzZciJfKzUnGhjAxeSBnsrRe9MyuMjr3bCJwWrrKShhduQ6XGREPieqVnnn1WPjCrRKTDk6Fo/s1600/bg2.jpg) repeat 0 0;
}
- selanjutnya simpan script berikut diatas kode </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.bgpos.js"></script>
<script type="text/javascript">
$(function(){
$('#Rightleft a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
});
</script>
- terakhir cara pemanggilannya pada Html atau pada template kalau saya biasa diletakkan di bawah tag <body> (sesuaikan dengan template kawan) :
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
- selesai... jangan lupa simpan template...
Catatan : Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi - Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
Komentar :
Posting Komentar