Menu Lava Lamp Jquery
Dalam tutorial yang lalu saya mempostingkan bagaimana cara membuat Fancy Menu Drop Down dan Menu Jquery Smoth dropdown. 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 :
Kalau masih penasaran lihat aja Demonya di bawah.
1. Login / Masuk Blogger
2. Pilih Rancangan Masuk ke Edit HTML
3. Jangan lupa centang ( Expand Template Widget )
4. Cari kode <head> bila sudah ketemu letakan kode Jquery dibawah ini tepat diatas code <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>
5. Terus cari code <body> letakan kode dibawah ini sebelum atau diatas kode <body> .
6. Code di bawah ini bisa juga diletakan di sidebar yaitu dengan menggunakan HTML/JavaScript .
<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>
Keterangan : code diatas bisa kalian Edit dengan Alamat-Url masing masing .
dan terakhir simpan Template dan lihat hasilnya.
>
Show
0 Comments
prev
next
