cBox merupakan widget Chating gratis yang disediakan oleh www.cbox.ws, meskipun gratis fitur yang disediakan sudah sangat mencukupi untuk memulai membangun hubungan dengan para pembaca blog kita, tampilan defaultnya sangat sederhana dan mudah digunakan, namun jika rekan-rekan cukup mengerti tentang bahasa CSS, rekan-rekan bisa memodifikasi agar sesuai dengan karakter blog rekan-rekan.
Tampilan dari cBox ini mirip seperti aplikasi messenger lain seperti Yahoo Messenger, Facebook Chat dll, para pengunjung blog bisa berkomunikasi dengan rekan-rekan sebagai pengelola blog atau pengunjung lainnya atau hanya meninggalkan pesan testimoni atas blog rekan-rekan, seperti itulah sistem kerja widget cBox ini, jika rekan-rekan tertarik untuk memasangnya di blog, berikut panduannya :
- Buat akun di www.cbox.ws dan aturlah tampilan widgetnya sesuai selera rekan-rekan
- Jika dirasa sudah cukup dengan tampilannya, silahkan klik menu Publish
- Copy semua code script yang diberikan, simpan di Notepad jika suatu saat memerlukannya lagi
- Login ke Akun Blogger rekan-rekan
- Pilih Menu Tata Letak >> Add gadget atau Tambah gadget >> HTML / Javascript, boleh ditempatkan dimana saja
- Copy Paste code script berikut ke formulir HTML yang tampil
<!-- LEFT HIDDEN by fenuto.com START -->
<style scoped="" type="text/css">
#hcl {position:fixed;top:275px;left:0px;z-index:+1000;}
* html #hcl {position:relative;}
.hcltab {height:76px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlq7hYcSntp7UqyJZmyH9mG9BKVMpvF5BnRzb0S26sXaMhkWUMMZIpid91dhD2jjg3-jXJEnRIq5V3vBWceYnm-NpRol6_EJD04NvNg5ykQSpJ1IdUarJmK77QeV1EI4w_ljPz_CDT3Mg/s66/cbred-LEFT.png') no-repeat;}
.hclcontent {float:left;border:2px solid #790909;background:#f3f6f7;padding:10px;}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe width="300" height="125" src="http://www4.cbox.ws/box/?boxid=3884365&boxtag=lde6k&sec=main" name="cboxmain4-3884365" style="border: 0px solid;" id="cboxmain4-3884365"></iframe></div>
<div><iframe width="300" height="75" src="http://www4.cbox.ws/box/?boxid=3884365&boxtag=lde6k&sec=form" name="cboxform4-3884365" style="border: 0px solid;border-top:0px" id="cboxform4-3884365"></iframe></div>
</div>
<!-- END CBOX -->
</div>
<div class="hcltab" onclick="showHidehcl()"> </div></div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- LEFT HIDDEN by fenuto.com END -->
- Replace bagian ini dengan code script yang tadi rekan-rekan dapatkan pada langkah 3
<!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe width="300" height="125" src="http://www4.cbox.ws/box/?boxid=3884365&boxtag=lde6k&sec=main" name="cboxmain4-3884365" style="border: 0px solid;" id="cboxmain4-3884365"></iframe></div> <div><iframe width="300" height="75" src="http://www4.cbox.ws/box/?boxid=3884365&boxtag=lde6k&sec=form" name="cboxform4-3884365" style="border: 0px solid;border-top:0px" id="cboxform4-3884365"></iframe></div> </div> <!-- END CBOX -->
- Simpan dan Selesai
Catatan :
Kode script pada langkah 3 sudah kami modifikasi agar Valid HTML, jika rekan-rekan Tes di http://validator.w3.org maka script tsb lolos validasi, namun ketika rekan-rekan mengerjakan langkah 7, akan menimbulkan 10 error pada saat dilakukan validasi HTML, hal ini dikarenakan ada beberapa attribut yang tidak sesuai dengan aturan dasar HTML 5 dari W3C pada script standar dari cBox, siapakah W3C ? silahkan rekan-rekan cari tahu di Search Engine dan mulailah berkenalan dengannya jika ingin blog rekan-rekan lolos validasi HTML.
Untuk memperbaiki error tsb, rekan rekan perhatikan contoh code berikut :
<!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4181268&boxtag=9nde00&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4181268" style="border:#EDDEDB 1px solid;" id="cboxmain4-4181268"></iframe></div> <div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4181268&boxtag=9nde00&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4181268" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform4-4181268"></iframe></div> </div> <!-- END CBOX -->Hapus bagian code ini :
- frameborder="0", marginheight="2", marginwidth="2", scrolling="auto", allowtransparency="yes"Hingga nantinya code scriptnya menjadi seperti berikut :
- frameborder="0", marginheight="2", marginwidth="2", scrolling="no", allowtransparency="yes"
<!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4181268&boxtag=9nde00&sec=main" name="cboxmain4-4181268" style="border:#EDDEDB 1px solid;" id="cboxmain4-4181268"></iframe></div> <div><iframe width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4181268&boxtag=9nde00&sec=form" name="cboxform4-4181268" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform4-4181268"></iframe></div> </div> <!-- END CBOX -->Demikianlah penjelasan dan langkah-langkah Pemasangan Widget cBox Melayang di Sebelah Kiri Blog, jika ada pertanyaan silahkan rekan-rekan sampaikan di kotak komentar, semoga artikel ini dapat bermanfaat.
Ditulis Oleh : 
wih keren ne...boleh saya sedot gan
BalasHapus