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

Artikel Terkait:

Blogger

• Cara Copy Paste Artikel Yang tidak bisa di Copy di Sebuah Blog ataupun Website
• Kenapa Blogspot.com berubah menjadi .co.id ‐ apa penyebabnya dan bagaimana mengatasinya?
• Cara Membuat Slideshow Pada Blogger
• Cara membuat chat box di blog & macam-macam chat box
• Cara Membuat Chat Box di Blogger
• Cara memasang radio online di blog
• CARA MEMBUAT RADIO STREAMING
• Membangun Radio Internet dengan Listen2MyRadio.Com
• Membangun Sendiri Radio Internet
• Radio Online
• Tampilan Baru Dasbor Blogger.com
• Membuat Label untuk Artikel Miniatur Hover
• Menambah Button Send ke Facebook
• Laporan berita sekilas dari w3spy.net
• Pengaturan Ukuran pada Kolom Komentar dan Postingan Lebih Fleksibel
• Membuat Web Hosting di Google Sites
• Google Code - Cara Membuat File Hosting di Google Code
• Tips Mendapatkan Banyak Follower di Twitter
• Membuat Artikel Terkait dengan Disertai Thumbnails
• Cara Merubah Blogger.com atau Draft.blogger.com Sebagai Default Dasbor Blogspot Anda
• Cara Memasang Widget SMS Gratis pada Blogger Blogspot
• Favicon Fitur Baru dari Blogger
• Menambahkan Gadget di Header
• Cara Membuat Menu dan Iklan Floating Bottom - Trik Menu dan Iklan Selalu ada di Layar
• Cara Membuat Iklan Melayang - Agar Iklan Tampil Setiap Halaman Blog Dikunjungi