Membuat Show Hide Floating Menu Untuk Aplikasi Widget

Show Hide floating menu merupakan suatu cara untuk membuat suatu aplikasi seperti  video, gambar, guest book, jam, musik dan masih banyak lagi dibuat menjadi tersembunyi. Apabila di klik ,maka suatu  aplikasi akan muncul. Cara untuk membuatnya adalah dengan menggunakan javascript. Berikut ini cara untuk membuatnya

Langkah-langkahnya:

1. Login ke account blogger.

2. Pilih Layout kemudian klik pada tab Page Elements.

3. Setelah itu Klik Add a Gadget  dan pilih Html/javascript.

4. Copy salah satu  script code di bawah ini.

Letak Show Hide Kanan


<!-- Begin Show Hide Floating - http://www.juliocaesarz.blogspot.com --> <style type="text/css"> #juliocaesarFX{ position:fixed; top:30px; z-index:+1000; } * html #juliocaesarFX{position:relative;} .juliocaesarFXtab{ height:108px; width:37px; float:left; cursor:pointer; background:url('http://img197.imageshack.us/img197/9641/juliocaesarz.jpg') no-repeat; } .juliocaesarFXcontent{ float:left; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidejuliocaesarFX(){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var w = juliocaesarFX.offsetWidth; juliocaesarFX.opened ? movejuliocaesarFX(0, 40-w) : movejuliocaesarFX(40-w, 0); juliocaesarFX.opened = !juliocaesarFX.opened; } function movejuliocaesarFX(x0, xf){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; juliocaesarFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movejuliocaesarFX("+x+", "+xf+")", 10);} } </script> <div id="juliocaesarFX"> <div class="juliocaesarFXtab" onclick="showHidejuliocaesarFX()"> </div> <div class="juliocaesarFXcontent">

kode aplikasi widget disini

<div style="text-align:right"> <a href="javascript:showHidejuliocaesarFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var juliocaesarFX = document.getElementById("juliocaesarFX"); juliocaesarFX.style.right = (40-juliocaesarFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.juliocaesarz.blogspot.com -->

Letak Show Hide Kiri


<!-- Begin Show Hide Floating - http://www.juliocaesarz.blogspot.com --> <style type="text/css"> #juliocaesarFX{ position:fixed; top:30px; z-index:+1000; } * html #juliocaesarFX{position:relative;} .juliocaesarFXtab{ height:108px; width:37px; float:right; cursor:pointer; background:url('http://img197.imageshack.us/img197/9641/juliocaesarz.jpg') no-repeat; } .juliocaesarFXcontent{ float:right; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidejuliocaesarFX(){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var w = juliocaesarFX.offsetWidth; juliocaesarFX.opened ? movejuliocaesarFX(0, 40-w) : movejuliocaesarFX(40-w, 0); juliocaesarFX.opened = !juliocaesarFX.opened; } function movejuliocaesarFX(x0, xf){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; juliocaesarFX.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movejuliocaesarFX("+x+", "+xf+")", 10);} } </script> <div id="juliocaesarFX"> <div class="juliocaesarFXtab" onclick="showHidejuliocaesarFX()"> </div> <div class="juliocaesarFXcontent">

kode aplikasi widget disini

<div style="text-align:right"> <a href="javascript:showHidejuliocaesarFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var juliocaesarFX = document.getElementById("juliocaesarFX"); juliocaesarFX.style.left = (40-juliocaesarFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.juliocaesarz.blogspot.com -->

5. Setelah itu klik simpan.


Keterangan:

•  kode aplikasi widget disini : ganti tulisan ini dengan script code video, gambar, jam ,guest book musik dan aplikasi lainnya.
•  http://img197.imageshack.us/img197/9641/juliocaesarz.jpg' : ganti tulisan ini dengan gambar kreasimu sendiri. Yang digunakan untuk sebagai tanda aplikasi apa yang dibuat show hide.
• #d241c7: digunakan untuk mengganti warna tampilan pada border.
• #ffffff: digunakan untuk mengganti warna tampilan pada background.
  

Untuk warna border dan background bisa lihat disini:
CODE WARNA

Posted in: Program,Show Hide,Tips,Widget