Cara Membuat Menu Seperti Slide Menu

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 komentarnya....