Glowing Navigation Menu with jQuery for Blogger

Langsung aja bro... trik kali ini tentang navigasi horizontal dengan efek warna glow seperti ilustrasi gambar di atas. Trik ini menggunakan kombinasi CSS dan JQuery untuk menghasilkan efek warna menyala dan efek slide yang menarik. Asli trik ini keren banget bro, coba tengok previewnya... Oke..Cuy... kalo tertarik langsung aja ke TKP...

Preview :

Klik gambar untuk melihat preview

Cara Pemasangan :

• Login ke blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode ]]></b:skin> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.
  
  
  .kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2}
  .kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
  .kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
  );background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
  #kwick1 a:hover{background-position:0 -50px!important}
  #kwick2 a{background-position:-190px 0}
  #kwick2 a:hover{background-position:-190px -50px!important}
  #kwick3 a{background-position:-380px 0}
  #kwick3 a:hover{background-position:-380px -50px!important}
  #kwick4 a{background-position:-570px 0}
  #kwick4 a:hover{background-position:-570px -50px!important}
  #kwick5 a{background-position:-760px 0}
  #kwick5 a:hover{background-position:-760px -50px!important}
  #kwick6 a{background-position:-950px 0}
  #kwick6 a:hover{background-position:-950px -50px!important}
  .kwicks li ul a{float:left;width:12em}
  .kwicks ul ul{top:auto}
  .kwicks li ul ul{left:12em;margin:0 0 0 10px}
  .kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

  
  - Copy-paste kode di bawah ini di atas kode </Head>.
  
  

  <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'></script>
  <script src='http://monozcore-project.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'></script>
  <script src='http://monozcore-project.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>


• Klik "Save" untuk menyimpan template.


• Balik ke "Page Element" untuk menambah gadget baru, dengan klik Design ==> Page Elements ==> Add a Gadget, kemudian pilih "HTML/Java Script". Letakan diatas postingan element gadget seperti gambar di bawah ini. Copy-paste kode di bawah pada kotak gadget.
  
  
  
  
  
  <div class='kwickswrap'>
  <ul class='kwicks'>
  <li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
  <li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
  <li id='kwick3'><a href='#' title='about'>About</a></li>
  <li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
  <li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
  <li id='kwick6'><a href='#' title='recomended links'>Resource</a></li>
  </ul>
  </div>
  <script type="text/javascript">
  $().ready(function() {
  $('.kwicks').kwicks({
  max : 190,
  duration: 800,
  easing: 'easeOutQuint'
  });
  });
  </script>
  
  
  | Blog Tools
  - Keterangan :
  • Kode yang berwarna merah (<a href='#') merupakan URL Link tujuan. Silakan diisi sesuai dengan yang sobat inginkan, misal untuk Home saya gunakan url blog jadi kode akan menjadi seperti :
    
    
    <li id='kwick1'><a href='http://monozcore.blogspot.com' title='Home'>Home</a></li>
  
  
  • Kode yang berwarna biru merupakan kode jquery, apabila di blog sobat sudah ada kode jquery silakan sobat hapus dulu kode jquery yang sobat pasang atau hapus kode jquery pada kode di atas.


• Klik "Save" untuk menyimpan gadget.

.: Semoga Bermanfaat :.