Cara Membuat Menu Seperti Slide Menu

Halo blogger,,,Kembali saya akan berbagi Tips Blogger,Mungkin agak aneh teman - teman Membaca judul dari posting ini saya sendiri  bingung mau memberi judul apa pada postingan kali ini,Karena postingan ini merupakan pesanan atau permintaan dari seseorang teman blogger yang ingin memasang tampilan menu seperti sebelah kanan blog saya,
Sebelumnya saya pernah berbagi Tips tentang Cara Memasang Buku tamu tersembunyi,nah mungkin postingan ini merupakan lanjutan dari  Cara Memasang Buku tamu tersembunyi, apabila teman - teman sudah pernah  mencoba tips sebelumnya pada postingan ini tidak berbeda jauh...


Berikut Ini langkah - Langkah nya :
1. Masuk ke account Blogger kamu, pilih Layout: kemudian Page Elements.
2. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
 height:100px;
 width:30px; float:left;
 cursor:pointer;
 background:url('http://lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png') no-repeat;
 }

.hitsukeFXcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
 var w = hitsukeFX.offsetWidth;
 hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
 hitsukeFX.opened = !hitsukeFX.opened;
 }

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
 <div class="hitsukeFXcontent">

 <!-- Taruh Kode  Kamu disini -->

 <div style="text-align:right">
 <a href="javascript:showHidehitsukeFX()"> [close] </a>
 </div>
 </div>
 </div>

 <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

4.SIMPAN.


Tunggu belum Selesai,,,selanjutnya kita tambah gadget lagi, kan tips ini menampilkan 2 menu tersembunyi,,berikut ini selanjutnya :
1. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
2. Copy-paste kode di bawah ini:

<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
 height:100px;
 width:30px; float:left;
 cursor:pointer;
 background:url('http://lh4.ggpht.com/_KdeVdQg2Vsw/Swj_PjBhSQI/AAAAAAAAAGw/3vmbzeov-kk/tabs2.png') no-repeat;
 }

.hitsukeFXcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
 var w = hitsukeFX.offsetWidth;
 hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
 hitsukeFX.opened = !hitsukeFX.opened;
 }

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
 <div class="hitsukeFXcontent">

 <!-- Taruh Kode Shoutmix Kamu disini -->


 <div style="text-align:right">
 <a href="javascript:showHidehitsukeFX()"> [close] </a>
 </div>
 </div>
 </div>

 <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

3. Simpan ....

Catatan : Tulisan yang berwarna Merah isi dengan script yang ingin anda tampilkan
Selamat Mencoba.....!!!  Apabila Suka dengan posting ini, berilah komentarn

Read more: http://www.oktri.co.cc/2010/03/cara-membuat-menu-seperti-slide-menu.html#ixzz1mkB5jgH2

Posted in: Blogger