Terima kasih telah mengunjungi blog ini muda-mudahan dengan adanya isi blog ini berguna bagi kita sobat blogger.................SALAM PERSAHABATAN

Minggu, 10 April 2011

membuat menu lava lamp horizontal jQuery






Dalam tutorial yang lalu saya mempostingkan bagaimana cara membuat menu lava lamp gray. Dalam tutorial kali ini saya akan membuat menu lava lamp jQuery yaitu sedikit berbeda dari tutorial yang lalu. Menu lava lamp yang kali ini background nya transparan
* Contohnya bisa dilihat disini



* Cara membuatnya sebagai berikut masuk ke blogger
* Pilih Rancangan
* Masuk ke Edit HTML
* Cari kode <head> letakan kode jQuery dibawah ini tepat diatas kode <head> atau sebelum kode <head>


<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/sliding-menu/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.geektantra.com/projects/jquery-sliding-menu/stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- jQuery UI is Optional. Its only required if using easing functions. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.geektantra.com/projects/jquery-sliding-menu/javascripts/jquery.sliding-menu.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();
  jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 });
});
</script>


* Setelah itu cari kode <body> letakan kode dibawah ini diatas atau sebelum kode <body> kode dibawah ini juga bisa diletakan di Gadget yaitu dengan cara tambah Gadget dan pilih HTML

<div id="HorizontalSlidingMenu">
    <ul class="SlidingMenu Horizontal">
      <li><a href="http://shofitkj.blogspot.com">Beranda</a></li>
      <li><a href="alamat-url">Album</a></li>

      <li><a href="alamat-url">Tips dan Trik</a></li>
      <li><a href="alamat-url">Blog</a></li>
      <li><a href="alamat-url">RSS Feed</a></li>
    </ul>
    <div class="ClearFix"></div>
  </div>

* Kode diatas bisa kalian Edit masing masing dan ganti alamat-url dengan alamat url kalian masing masing dan terakhir simpan dan lihat hasilnya

0 komentar:

Posting Komentar

◄ Posting Baru Posting Lama ►
 

Follows

DMCA.com

Special Song


Iklan Melayang
Iklan Melayang
Flag Counter
blog sementara di renofasi untuk sementara aja TNK"S