Home » , » Cara Membuat Label Animasi

Cara Membuat Label Animasi

Trimuda Reog | 14.53 | 3komentar
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>
__________________________________________________
<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>
__________________________________________________
 4. clik save template.. 
Cara Membuat Label Animasi Mudah n Simpel kan?? Semoga bermanfaat sobat. . . .
Share this article :

3 komentar:

  1. gan gmn caranya buat label seperti blog agan ini? yang tetap di atas dan di dalamnya masih berisi pilihan lagi? maaf masih newby

    BalasHapus
    Balasan
    1. Masukkan kode ini pada widget agan dan edit sesuai kebutuhan misal warna dan menu silahkan diganti!
      kalo 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>

      Hapus

Tinggalkan Jejak Dengan Berkomentar ya! Terimakasih

Daftar Kategori

 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger