Cara Membuat Label Animasi >>>buat blog sobat lebih menarik dengan membuat label bergoyang, Sekarang kita akan menambahkan membuat label ala Ayu Ting-ting yang suka bergoyang. Apa efeknya? Jadi, ketika sobat meletakkan kursor sobat pada salah satu label, label akan bergerak ke kanan. . Terlihat benar bagus? Sekarang, jika sobat ingin mencoba Label animasi dengan jQuery, cukup ikuti langkah-langkah di bawah ini.
1. Login ke akun blogger sobat
2. Pergi ke Desain -> Edit HTML
3. Copy kode di bawah, dan paste di atas </head>
1. Login ke akun blogger sobat
2. Pergi ke Desain -> Edit HTML
3. Copy kode di bawah, dan paste di atas </head>
__________________________________________________
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$undefineddocument).readyundefinedfunctionundefined) {
$undefined'a.linknudge, .Label ul li a').hoverundefinedfunctionundefined) {
$undefinedthis).animateundefined{
paddingLeft: '20px'
}, dur);
}, functionundefined) {
$undefinedthis).animateundefined{
paddingLeft: 0
}, dur);
});
});</script>
__________________________________________________</script>
<script type='text/javascript'>
var dur = 450;
$undefineddocument).readyundefinedfunctionundefined) {
$undefined'a.linknudge, .Label ul li a').hoverundefinedfunctionundefined) {
$undefinedthis).animateundefined{
paddingLeft: '20px'
}, dur);
}, functionundefined) {
$undefinedthis).animateundefined{
paddingLeft: 0
}, dur);
});
});</script>
4. clik save template..
Cara Membuat Label Animasi Mudah n Simpel kan?? Semoga bermanfaat sobat. . . .
thanks gan infonya
BalasHapusMasukkan kode ini pada widget agan dan edit sesuai kebutuhan misal warna dan menu silahkan diganti!
BalasHapuskalo masih bingung silahkan tanya
<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#eee; color:#666; font-size:11px; line-height:30px; border-bottom:1px solid #ECEDE8;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #ddd; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='http://3.bp.blogspot.com/-AQ0v1sE-miA/TcANHnMOmBI/AAAAAAAAAXA/QVOV_CeHk4Q/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
</ul>
</div>
<div class='clear'/>
</div></div>