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
* 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 comments:
Post a Comment
Tinggalkan komentar anda...