ingin punya Cbox kyak gini??

Hmmmm...akhir-akhir ini postingan saya tidak jauh-jauh dari Cbox nih, tapi tak apalah yang penting Cbox (hehehe..Cbox lagi). Setelah otak-atik kode akhirnya saya menemukannya nih bagiamana cara membuat Cbox Show/Hide pada Posisi bawah dengan fasilitas Background(Background dapat diganti). Mungkin saja sobat bosan dengan Cbox Show/Hide disebelah kiri atau kanan blog (*Patut dicoba nih).

Caranya mudah kok, baiklah...mau tau caranya?? yuk ikuti langkah berikut :

1. Pastinya login  Blogger dulu

2. Pilih Rancangan>>Elemen laman

3. Tambahkan Gadget HTML/Java Script (Jangan diberi judul)

4. Copas kode berikut :

<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/AVvXsEgOEIvmNfQe9JsDcTWJgwlDsfXdNS-Ymv4MMNNM1lAC4A02M3NW0GY68WA2k3OKtp7AjTrSppdHLpq_7QcNEJ1sqCqMQUCzPlqwBPTI9LjRBxiGL6pIfRV6MtfjC0QjbYPth-JdWvzl_V0/') no-repeat;

}

.cbcontent{

float:left;

border:2px solid #676767;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieOpCbc5LZWCwcOk-oeMXuZW3IQPzdJreFBxY7jbOuTe0Y9LtAfC49p-dmYwEApNL-LJuAsWrSck5bCJGdkGWvhKQ-IGDDhdRNUrxSpx-zQeQWKNag-1_gJpzOx-ui7heQa0GAsM7AW42/)#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 KODE CBOX ANDA -->

<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>

</div>

</div>

 <script type="text/javascript">

var cb = document.getElementById("cb");

cb.style.bottom = (30-cb.offsetWidth).toString() + "px";

</script>

5. Ganti Kode yang berwarna merah dengan kode cbox

Note : Kode diatas digunakan untuk ukuran Cbox berikut (lihat Contoh berikut) :

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: left; line-height: 0">

<div><iframe frameborder="0" width="270" height="130" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 0px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="270" height="80" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 0px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

-Silahkan ubah ukuran Cbox sesuai text berwarna biru diatas.

-Jika menggunakan Cbox yang ukuran tingginya melebihi ketentuan diatas silahkan ubah kode yang diberi background kuning (30) menjadi -100 (min 100), merubah kedua kode tersebut harus sama angkanya, Kalau belum pas silahkan ubah angka tersebut hingga menemukan hasilnya (*Jangan bosan-bosan mencoba)

6. Save & Lihat Blog..... jeng..jeng..jeng.... Nah... Cukup segitu caranya.

"Silahkan dikembangkan sendiri untuk tampilan lebih menarik lagi"

"Jika ingin

Copas tulisan ini jangan lupa beri sumbernya yaa (*kode etik blogger) "
 thx....