Cara Mudah Membuat/Memasang Chatbox Yang Bisa Buka Tutup/Tersembunyi

Ok sobat blogger, pada kesempatan ini saya akan sharing tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup. Ini melanjuti postingan saya sebelumnya yaitu Cara Memasang Chatbox Shoutmix Pada Blog.

Sebenarnya widget buka tutup/floating widget bisa dipasangi yang lain seperti : gambar, adsense, ataupun yang lain.

OK langsung saja, ini dia caranya :

• Pertama... kita harus punya akun shoutmix chat, kalau belum punya bisa daftar terlebih dahulu di www.shoutmix.com. jika belum tahu cara buat akun shoutmix buka  Cara Membuat Chatbox Shoutmix Pada Blog. Atau mendaftar di cbox.ws silakan buka Cara Mendaftar Chatbox Untuk Blog di Cbox
• Kemudian jika sudah punya akun shoutmix chat, seperti biasa login ke blogger
• Buka Rancangan/Layout tepatnya Elemen Laman.
• Klik Tambah Gadget, kemudian pilih Tambahkan HTML/Javascript.
• Copy script berikut dan letakan pada kotak HTML tersebut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik  <a href="http://dunia-belajarr.blogspot.com/2012/03/cara-membuat-chat-box-melayang.html">
disini </a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Sedikit Keterangan dari diatas :

  ~ Tulisan berwarna hijau : adalah script yang digunakan dalam chatbox/shoutbox. jika belum punya akun shoutbox bisa lihat cara membuatnya di Cara Membuat Chatbox Shoutmix Pada Blog Atau bisa mendaftar di http://www.cbox.ws/ juga bisa lihat caranya di Cara Mendaftar Chatbox Untuk Blog di Cbox. Caranya tinggal hapus dan ganti dengan script shoutmix yang sudah dibuat. Disini juga bisa anda isi dengan yang lain seperti gambar atau adsense.

  ~ Tulisan berwarna biru : adalah gambar yang digunakan dalam chatbox buka tutup berikut contoh gambar yang lain jika ingin mengganti gambarnya.

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGVvRsdUDujvsIUZa0uNGXJfh_btpeMMhFMRGL4DD6sT-6ozqzlvHBtqJlNawJrbOm2me0jVmTa2j24mC5z6Ae-w-P4FfCNNleTI3bOvx2YscWSLx8oLiA9Mp19QSGX6p8CkZy8fHVOFE/s1600/cbblue-2.png

url gambar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbSodan9BwOmZS4yWDQcN41MFcNazXAqlw8oZnhnQutTYd3mRA8TET8ucVWR_oKDGwr_4DI0NvFnCBLRhBckUcCxOvy5IVoEsbSL1I6KfkFoF5AMTc7rp1mYvp4GEVBAXimKbreL_XicE/s1600/cbblue.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNKTFCptYkxbntyDJaBePt74blp53-A1Atcz13c17Nd-2oTT-Ub0r8sl9T5NXGupCY8X7gVDTm8OiOgh_JDqCphfWuP3EuD65YeLg7Dj8AcAhDsWB4iDs4-iT19eSmDZigHN-V8F55wrb/s1600/cbgreen.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4jj6D0ZlJM_n84jT3s_0jzrC5SFhk3aowaZg4R39kVYH2GCo8l5UinJQIBfJDsAd3LK94YKQGMGvN3RVTP6F1J4n15OA8bpx_XJHlldKHFP5ZKn-bZLq52YBLWeCFq93EWazDvtEM-p_/s1600/cbyellow.png

url gambar :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBs7nqMimRCpVSGZX1gK-beU8FajmGgYdEUoGv8os4CORiyDMPezPY6Augei0Optkj_IbQ0Tvyb6WuNK7fNpkftmRQS_ecq6hJhc0nCahG__YhyCwYFDn8HC-QdcRK8SYtiPFtkiMvnm94/s1600/cbred.png

Sekian dari saya tentang Cara Memasang Chatbox Shoutmix Yang Bisa Buka Tutup, semoga bermanfaat dan berhasil...






UPDATE, berhubung Shoutmix lama sekarang sudah tidak bisa untuk mendafarkan lagi, Jadi silakan anda mendaftar ke http://www.cbox.ws/. Cara mendaftarnya hampir sama dengan shoutmix, tinggal diisi sesuai dengan perintahnya.