20 April 2013

Cara membuat menu Aplebar dengan efek sliding Jquery di blog

Posted at  17.00  |  in  tips dan triks blog




  • Masuk ke akun blogger anda -> KlikTemplate -> Edit HTML
  • Cari tag / kode </head> dengan menggunakan CTR + F untuk memudahkan pencarian tag.
  • Pastekan Script kode berikut tepat diatas kode </head>

  • Simpan Template
  • Kemudian masuk -> Tata Letak
  • Klik Tambahkan Gadget -> Pilih HTML/Javascript
  • Pastekan kode dibawah ini didalamnya:
<style>
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQkWWUgZCwdYEf26Md70AXAdUCYJsTIp02Uq7Ft5n_BWfeJh4vByKJPcpZEb3YBGkERdy-Q9GL8y270UqmeWEG45QsljtcMwSqFrvUnxMC2-NccLhDm_OSoVd0AnpqJWbipm2NqPoQfu8/s1600/btrix_no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/}
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiit1Hs8igXDNNyF2IXNpntwE6whw7HuzC0-AjxdimJHRW_r37fKn7-XQE9F7P0osnFMN0uuYDDlnrnJo81KrAA2ziRYnh0Y4x0MNFESJHQGd5vdudtUmi1SwmKcl-r2CRFhvvAYAJJhvQ/s1600/btrix_kwicks_sprite.jpg);
 background-repeat:no-repeat;}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;}
#kwick1 {
 background-position:0px 0px;}
#kwick2 {
 background-position:-200px 0px;}
#kwick3 {
 background-position:-400px 0px;}
#kwick4 {
 background-position:-600px 0px;}
#kwick1.active, #kwick1:hover {
 background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; }
#kwick1 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiGcX3UfeaJb2a5YwF2YhlqjRqRhnFIGUKnYC4HKlO8IAO-jt9DXPsV63Z3Pd6E1AXBniRc_Xd1tK-C1PTEPtoKLuWQ1Dq5X-TSZhq6Yn-JCcJTUjDqEjezHNP83fsPyaU4jm4yA0B24/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;}
#kwick1 a:hover{
 background-position: left -80px;}
#kwick4 a{
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiGcX3UfeaJb2a5YwF2YhlqjRqRhnFIGUKnYC4HKlO8IAO-jt9DXPsV63Z3Pd6E1AXBniRc_Xd1tK-C1PTEPtoKLuWQ1Dq5X-TSZhq6Yn-JCcJTUjDqEjezHNP83fsPyaU4jm4yA0B24/s1600/btrix_end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;}
#kwick4 a:hover{
 background-position: right -120px;
}
</style>
<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>  

  • Ganti tanda # dengan link anda
  • Simpan Gadget....Selesai.

Semoga bermanfa'at...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 17.00
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

4 komentar:

  1. Bole juga nehh blog-nya bang... bakal banyak belajar di sini nehh..

    BalasHapus
    Balasan
    1. Terima kasih bang nelson atas apresiasi dan kunjungannya. Saya Masih pemula bang, belum professional. Salam kenal..

      Hapus
  2. Balasan
    1. Terima kasih sobat sudah mau berkenan berkunjung lagi di blog saya dengan tampilan baru, dan wajah baru. Mudah-mudahan dengan tampilan nuansa yang baru ini bisa menjadi lebih baik. Salam.. :)

      Hapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top