Membuat Cbox Show Hide Dibawah Blog

Berbekal Ilmu dari mas http://biology-semestaalam.blogspot.com dan http://exeloph.blogspot.com ilmu saya tentang blog jadi bertambah, sebelumnya saya sudah postingkan bagaimana cara membuat kotak sepeti shout mix yang bernama cbox...

Pada thread kali ini saya akan mengajarkan sobat bagaimana untuk memodify kotak cbox tersebut menjadi show hide dibawah blog.. Selain itu pada bagian bawah ada efek fire nya juga,,. Keren euuy....

Mari Kita Praktekkan :

BAGI YANG BELUM MEMPUNYAI CBOX SILAHKAN LIHAT DI POSTINGAN SEBELUM INI !!!

KLIK DISINI !!!

1. Copy script dibawah ini !!!

                                                                                                                             


<style type="text/css">#cb{
position:fixed;
bottom:150px;
z-index:+1000;
}
* html #cb{position:relative;}
.cbtab{
height:30px;
width:150px;
float:top;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7JRTzwQKXQurWwWrgo-UXouBexpeN80ufStBeyOaneZDPVwkixc9T9yqgwhyphenhyphenlBxw-ZZW89rQds3HBZphZ0ACXVbFwD0GJs9q-gg5wr2Wr4RSbAkbDaVO4DqZcf4codY4QADYkcc18nSg/') no-repeat;
}
.cbcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:5px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideCB(){
var cb = document.getElementById("cb");
var w = cb.offsetWidth;
cb.opened ? moveCB(0, 30-w) : moveCB(20-w, 0);
cb.opened = !cb.opened;
}
function moveCB(x0, xf){
var cb = document.getElementById("cb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
cb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveCB("+x+", "+xf+")", 10);}
}
</script>
<div id="cb">
<div class="cbtab" onclick="showHideCB()"> </div>
<div class="cbcontent">

•••GANTI DENGAN CODE CBOX KAMU•••

<div style="text-align: right;">
<a href="javascript:showHideCB()">
[Tutup]
</a></div>
<font size="2"><a href="http://exeloph.blogspot.com/2010/09/showhide-cbox-pada-posisi-bawah-fire.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
<font size="2"><a href="http://byamatir.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Wicak Rezpector</span></div></a></font>
</div>
</div>

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

                                                                                                                              

Perhatian :
- Ganti  Kata •••GANTI DENGAN CODE CBOX KAMU••• dengan code cbox mu..
  (code cbox terdapat di 'Login ke akun mu di cbox.ws - Klik Publish - pada kotak dibagian itulah code cbox mu) ===> contoh :

- Angka 30 adalah ukuran letak.. Silahkan sesuaikan sendiri. Jangan malas malas untuk menyesuaikannya. mudah kok. hehehe
(dan ingat, ukuran harus sama, kalo pada blog ane ini ukuran yang sesuainya adalah -130. Jadi hasilnya seperti -130-cb)

++Cukup itu saja yang kamu otak atik ...++


2. Pastekan script diatas (setelah kamu atur) pada side bar blog anda...
    Caranya :
    - Login ke Blogger
    - Rancangan - Elemen Laman - Tambah Gadget - HTML/Javascript - (dan paste pada kotak content)
    - Klik Simpan


Semoga bermanfaat dan silahkan mencoba...