Tampilan CBox sesuai selera Blogger

Kawan masih ingat dengan postingan saya yang berjudul CBox Kotak Chatting Alternatif dan karena ada beberapa pertanyaan kawan Blogger di CBox yang menanyakan cara membuat tampilan CBox seperti ini, termasuk juga di Blog saya yang lain yang isinya seperti berikut :r 

gan, buat cbox kaya gini gmn sih gan ? ak cari - cari di postingan agan kq gk ada?

memang sudah ada yang saya kasi tahu, tapi tak ada salahnya saya posting disini.

Sebenarnya itu CBox memberikan kita sebagai pengguna kemudahan-kemudahan maupun fasilitas yang cukup baik dibandingkan dengan Kotak Chatting lainnya dari mengganti background CBox, mengganti Emoticon tanpa batas sampai model tampilan yang Blogger inginkan. 

Caranya :

1. Login ke CBox dengan Account kawan  
2. Pilih Publish!
3. Lihat kebawah Step2: Choose a variation : disana ada 4 pilihan yang bisa kawan pakai

• Inline [Default] 
• Popup Link
• Floating Button 
• Deferred Load 

Sedangkan CBox di Blog ini saya pakai Floating Button yang tampilannya hampir sama dengan Popup Link, bedanya hanya pada Button dengan Link. :D 

Script Floating Button seperti berikut :

<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 300px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()"><b>Open Cbox</b></div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 300px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;"></div>
<script type="text/javascript">
var cbvis = false;
var cbload = false;
var cbcookie = "cboxvis=";
function togglecbox () {
var cbdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbvis) {
if (!cbload) {
cbdiv.innerHTML = '<iframe frameborder="0" width="300" height="362" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&amp;boxtag=xxxxxx&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-yyyyyyy" style="border:#0041A8 1px solid;border-bottom:0px" id="cboxmain2-yyyyyyy"></iframe><iframe frameborder="0" width="300" height="78" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&amp;boxtag=xxxxxx&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-yyyyyyy" style="border:#0041A8 1px solid;border-top:0px" id="cboxform2-yyyyyyy"></iframe>';
cbload = true;
}
cbdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cbdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbvis = !cbvis;
document.cookie = cbcookie+((cbvis)?1:0);
}
// Toggle Cbox open if it was previously
var cbcookiei = document.cookie.indexOf(cbcookie);
if (cbcookiei >= 0) {
if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
togglecbox();
}
}
</script>

Teks berwarna merah yyyyyyy dan xxxxxx adalah kode CBox saya, yang sudah tentu kode CBox kawan berbeda
Teks yang saya beri warna hijau untuk button dan coklat muda adalah body CBox, yang perlu di edit kalau kawan menginginkan tampilan CBox seperti saya punya, sebagai contoh setelah saya edit :

<div id="cboxbutton" style="position: fixed; bottom: 10px; right: 4px; width: 85px; height:20px; padding: 10px 1px 5px 1px; text-align: center; cursor: pointer; background-color: #000; border:#FFF 2px solid;border-radius: 5px;  font-family: Tahoma, sans-serif;font-size: 16px; color:#FF0;" onclick="togglecbox()"><blink>Open Cbox</blink></div>

<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 206px; width: 300px; background: #95CAFF; padding: 3px; line-height: 0;border:#000 2px solid;border-radius: 3px;"></div>

Oh ya hampir lupa, script CBox tersebut bisa disimpan dimana saja [bisa digabung] pada gadget.

Simpan gadget dan Selamat berkreasi  :z