Membuat Show Hide di pinggir

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 Membuat

Show Hide Floating Menu Untuk Aplikasi Widget

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

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>

Letak Show Hide Kiri

</div>

kode aplikasi widget disini

<a href="javascript:showHidejuliocaesarFX()"> [close] </a> </div>

</div>

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://i683.photobucket.com/albums/vv193/vebyo
/GuestPink.gif' : 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.>

Selamat mencoba...........................

Cara yang lain

Masukan kode di bawah ini ke Gadget HTML anda

LEFT-Hidden Chatbox

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFjItN8UG-I27gFIgYvNS7AN_B4djMHEakqKdfaolHnZUDL3cdOoG6npJPwLHaM-iqRuImQaKkxENv5cHGkbSMXxvpWjPj_nQRpaS88lRtuFtjg0Jpo8sQWW2bpccZwd3DvL-HwcO-nI/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">



<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://mujimbreng.blogspot.com/" target="_blank">
Aplikas...

</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

RIGHT-Hidden Chatbox

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_L0dl97ISrLp0RBJnE0rY1WsRwGtHNaWzoGzJ0sxU-b6CyIavJ33QsRt58evcCFyDXIss0vgOJ8W0ldGbUJ-UIty6NUo41DYHcmc_SeXnqp3CKwObbCPGJl7mJ59rqK_38RxPbyA4PA/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">



<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://mujimbreng.blogspot.com/" target="_blank">
Aplikasi

</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Keterangan

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_L0dl97ISrLp0RBJnE0rY1WsRwGtHNaWzoGzJ0sxU-b6CyIavJ33QsRt58evcCFyDXIss0vgOJ8W0ldGbUJ-UIty6NUo41DYHcmc_SeXnqp3CKwObbCPGJl7mJ59rqK_38RxPbyA4PA/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}

Selamat berkreasi.............................