Membuat Cbox Show Hide Disamping (Kanan) Blog

Beberapa waktu lalu, aq dah membuat tutor tentang bagaimana caranya membuat cbox show hide dibawah yang terkesan rumit bagi anak awam seperti aq,, walaopun awam tapi bisa hehehe...
Cek :
[Membuat Kotak Buku Tamu Blog]
[Membuat Cbox Show Hide Dibawah Blog]

Pada tutor kali ini bisa saya katakan cukup mudah dan lebih menarik dari pada sebelumnya...


Screenshot :

Sebelum Diklik 

Sesudah Diklik  

Okeiii yang tertarik silahkan coba gratis...

1. Copy kode dibawah ini !!!

                                                                                                             

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jmGEaj1RGfOc5FfHh4MZZQ6Lyzq9wPD9mr_-CQepcR58-gMVrfr5YmLBXc0ZsqG51LXrD33GYQl_R29pDZhqylF3KoSZwbKKrclcyMxIcZOAgIWBmJ1ca0RR7m78S5v0QXs8zM37DTe1/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

===>Ganti Dengan Kode Cbox Anda <===

<div style="text-align:right">
<a href="http://byamatir.blogspot.com">
[☺☻☺☻]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>

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

                                                                                                              

2. Masuk ke Blogger
3. Rancangan - (pada elemen dasar) - Klik Tambah Gadget - HTML/JavaScript
    Dan Pastekan pada kolom content...
    Untuk Kolom Judul biarkan kosong.
4. Klik Simpan dan lihat hasilnya...

SELESAI

Keterangan :
Pada kode diatas,, kata :

===>Ganti Dengan Kode Cbox Anda <===

ganti dengan code cbox anda..
(Kode Cbox adalah Code yang diberikan oleh cbox.ws sewaktu anda membuatnya..)
Login ke cbox.ws - Publish - (dan lihat codenya di bagian bawah)..

Contoh code cbox :

SELESAI TOTAL.. Selamat mencoba ...

Silahkan Sebarkan Atau Copy Paste pada Website/Blog Anda,, Tapi Harus Mencantumkan Alamat Blog Ini Pada Postingan Anda

© All Right Reserved