Tips Memasang ChatBox Tersembunyi di Blog

Dalam posting kali ini,saya akan berbagi kepada anda cara memasang chatbox Tersembunyi di sidebar blog.ChatBox ini sangat berguna bagi blog anda ketika pengunjung ingin meninggalkan pesan kepada anda.Cara kerja dari ChatBox Tersembunyi ini sangat mudah,hanya buka dan tutup saja.Contohnya,ChatBox blog saya.Anda bisa melihatnya sebagai demo.Untuk cara memasangnya,silakan perhatikan langkah-langkah di bawah ini :

1. Login ke Blogger - Rancangan 
2. Klik Add a Gadget
3. Pilih HTML / JavaScript
4. Kemudian Copy-Paste kode di bawah ini di HTML / JavaScript anda.Yang berwarna merah,silakan anda ganti dengan kode script chatbox anda,kode scriptnya dapat diperoleh dari ShoutMix atau CBox.Yang berwarna biru,silakan anda ganti URL gambar tab ChatBox-nya.

<!-- right hidden chatbox by http://billyhalimblog.blogspot.com/ START -->

<style>

#hcl {

position:fixed;

top:60px;

left:3px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {

height:120px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6NNi9hZHxgqDl_JruZ1rnwBUGjR_lPbeYSOhaiRZCWYDEgg_RSPhY4T9OE7uFVM9wKaFE5XI-zrG8WgQDlnRVE4DmDrppiLJvZVpZJOBsBf-1bDBEmEMGfh9R4Cf9UwjYI_BW0rZxoe_/s1600/cbred.png') no-repeat;

}

.hclcontent {

float:left;

border:6px solid #008232;

background:#ff9900;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

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

<!-- Letakkan Script ChatBox anda disini -->

<br />
Mau seperti ini?<br />
Click disini--->
<a href="http://jogoyitnan-free.blogspot.com/2011/07/cara-mudah-membuatmemasang-chatbox.html">
Tutorial Blog

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="float:right">

<a href="javascript:showHidehcl()">

[Hide]

</a>

</span>

</div>

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

<!-- right hidden chatbox by http://billyhalimblog.blogspot.com/ END -->

Keterangan : 
Tulisan yang berwarna merah,silakan anda ganti dengan kode script chatbox anda,kode scriptnya dapat diperoleh dari ShoutMix atau CBox.Yang berwarna biru,silakan anda ganti URL gambar tab ChatBox-nya.Tulisan berwarna orange adalah ukuran-ukuran pada chatbox tersebut seperti top : jarak chatbox dengan paling atas blog. height : tinggi chatbox, width : lebar chatbox, border : ukuran border (garis tepi) chatbox,border solid : warna border, background : warna background chatbox.


Berikut adalah URL untuk gambar tab ChatBox-nya : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7F5kxJ-_Y4qITpEFHVSFfxFO-DZj7-rS1ErQxwj60m5Gbr8f41oV1en9FuFbvMsO2YObPWzieyfiv9kvgMbxTPGTyQ5VBy65h4ojHJT1SnQFkSbH437bCgLyW7MvPjRprK251aKV0Naz/s1600/cbblue-2.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvKQidWRrCBcAHug6ZtLdFSvmLg_WM_FlaAO4X9Oi6ETEgZgdzvvvWUJhSgyGZwf8UF423si-h4oExVPS5mN8PegNGetELj7vf7IwBWTCPDlOHtgNz4ioMQIKq11aW5T23ABH0sXgfq6w/



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcG6sH1CwxK588KLDj592BhQ9iSpH_oDFyqknHybuL-KpI3I2iBb3V18bjw1s4Pe1MECIrOJ4GXq_f1fuky515S6QrtEp5b2sZSTiEXHTSn0MBJWi957auG3CdAcBfqH29NNbMmod8Jaq/s1600/cbgreen.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-57J4jiRbhFB3lhh3gAcQ49v0DULGSvG3DmlmXorKkG5qMSTs9-2IzV2AZBN_oFkRFVU4PJ9ebNxgFTNRIzpBuHScZyGxWWXDqA54NwEnAX0GJ3mEdL6tyzIpytrIUwunQVg_Vxsuii6E/



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6NNi9hZHxgqDl_JruZ1rnwBUGjR_lPbeYSOhaiRZCWYDEgg_RSPhY4T9OE7uFVM9wKaFE5XI-zrG8WgQDlnRVE4DmDrppiLJvZVpZJOBsBf-1bDBEmEMGfh9R4Cf9UwjYI_BW0rZxoe_/

Selesai

Semoga Bermanfaat

Sumber : http://jogoyitnan-free.blogspot.com