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
BalasHapusgan gmn caranya buat label seperti blog agan ini? yang tetap di atas dan di dalamnya masih berisi pilihan lagi? maaf masih newby
BalasHapusMasukkan kode ini pada widget agan dan edit sesuai kebutuhan misal warna dan menu silahkan diganti!
Hapuskalo 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>