Home / Trik dan Tips Blog / Show/hide Cbox pada posisi bawah [+Fire Background]

Show/hide Cbox pada posisi bawah [+Fire Background]

Posted by Unknown Selasa, 13 Desember 2011 0 komentar

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/AVvXsEh-4ebuv2Ru1Pw3s2r6xd0MNNXnLtJeWIbu17h7A3bzW9sLo6zdQorFgr-T3j364na5PYq9GxD_ZMZVw7OwHDvwfpAJy9d3OKTmDQXtd3UEVdApCbyjZn_uo7b5E_-dV-2_gjF14oGw6rg/') no-repeat;
}
.cbcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj58PIUGzbR3TZ2YBHQ6LlSA86px_4C3WdnB6q6IdB-UWgEHqaGd4gfq1guTLfXr5aJg0Q1L_b_OEohCDgtL6HXGNTZ-mK2SYd-AG_MxCXony0e3huXNdG6fUHOxn46tGbroomZB_AhB4hn/)#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">



<div style="text-align: right;">
<a href="javascript:showHideCB()">
[Tutup]
</a></div>
<font size="2"><a href="http://rizkyariff.blogspot.com/2011/12/showhide-cbox-pada-posisi-bawah-fire.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Fullka Dot</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) :

<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&boxtag=b5gcdz&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&boxtag=b5gcdz&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>

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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Show/hide Cbox pada posisi bawah [+Fire Background]
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://azharadzuan.blogspot.com/2011/12/showhide-cbox-pada-posisi-bawah-fire.html. Terima kasih sudah singgah membaca artikel ini.