Show Hide or Hide Show

Tidak bosan-bosan Beben si bloglang anu ganteng kalem tea ini membahas mengenai hide show. Mungkin masih menjadi primadona menyembunyikan dan memunculkan kembali sebuah konten di blog ini yah sob :D Slide-In dan Appear Lost sama-sama fungsinya menyembunyikan content ;))
BW jauh² eh ternyata dapat lagi fitur seperti ini! Sobat kita ini juga membuat hal serupa tapi beda posisi Show/Hide Cbox pada posisi atas. Jika mau versi disorot langsung keluar sobat bisa gunakan ramuan berikut :D Beben tidak akan membahas dimana ini harus disimpan-simpannya, soalnya trik ini mirip dengan Membuat Buku Tamu Tersembunyi dan Buku Tamu Tersembunyi Versi 2.

Jadi disini Beben hanya kasih kodenya saja, dan kode ini didapat dari sobat HTC Blog :-"

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
cursor: url(""), default;
background:url('http://3.bp.blogspot.com/-4KFTMnDvwIk/TVfWlDrFDZI/AAAAAAAABWU/S7PPebRl1bc/s1600/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBG7g2OS7FoiFDnJfJ9G-UwXBtQlULF7crGRVOesORl6cMSTkWCEQTCq9eVtZn0cWPgAZIegrkuA7x8j3y11ccrU-fGpGe3ZcbLlqYbMFJwvrvUukNDM67v3QkwyCRbNg66SMXoVtOErNK/s1600/grass.png) no-repeat bottom;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

<!-- CONTENT CBOX HERE -->

<div style="text-align:center">

<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://4.bp.blogspot.com/-BUkjF5zT-qc/TVfWwrNhcUI/AAAAAAAABWY/21oIua9O69U/s1600/CloseComment-1.png" /><hr /></center>
</a>

</div>
</center>
</div>

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

Isikan deh Content mau dipasang apaan. Lanjuuuttt...Show Hide or Hide Show

<script type='text/javascript'>
//<![CDATA[
var move;
var xpos=-400;

function StaticMenu() {
if (move==2) { move=-2} else {move=2};
document.getElementById("SlideMenu").style.top=parseInt(document.getElementById("BotonMenu").style.top)+100+"px";
document.getElementById("SlideMenu").style.visibility="visible";
MoverMenu() }

function MoverMenu(){
xpos=xpos+4*move;
if(xpos <- 400) {xpos=-400};
if(xpos > 0) {xpos=0};
document.getElementById("SlideMenu").style.right=xpos+"px";
if (xpos <=-400 || xpos >=0) {window.clearTimeout() } else {window.setTimeout("MoverMenu();",10);} }
//]]>
</script>

<div id='SlideMenu' style='position:fixed; visibility:hidden; z-index:1;'>

<!-- CONTENT CBOX HERE -->

</div>

<div id='BotonMenu' style='display:scroll;position:fixed;top:100px;right:0px;'>
<a href='javascript:void(0)' onclick='StaticMenu();' title='Mostrar / Ocultar'>On|Off</a>
</div>

Script ini posisinya akan ada disebelah kanan, jika mau sebelah kiri jadi harus begini.

<script type='text/javascript'>
//<![CDATA[
var move;
var xpos=-400;

function StaticMenu() {
if (move==2) { move=-2} else {move=2};
document.getElementById("SlideMenu").style.top=parseInt(document.getElementById("BotonMenu").style.top)+100+"px";
document.getElementById("SlideMenu").style.visibility="visible";
MoverMenu() }

function MoverMenu(){
xpos=xpos+4*move;
if(xpos <- 400) {xpos=-400};
if(xpos > 0) {xpos=0};
document.getElementById("SlideMenu").style.left=xpos+"px";
if (xpos <=-400 || xpos >=0) {window.clearTimeout() } else {window.setTimeout("MoverMenu();",10);} }
//]]>
</script>

<div id='SlideMenu' style='position:fixed; visibility:hidden; z-index:1;'>

<!-- CONTENT CBOX HERE -->

</div>

<div id='BotonMenu' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='StaticMenu();' title='Mostrar / Ocultar'>On|Off</a>
</div>

Jika posisi kurang atas/bawah tinggal rubah nominal tulisan warna merah itu. Tulisan On|Off bisa digantikan dengan sebuah image lucu juga :)
Happy blogging \m/