Cara Membuat Hidden ChatBox di Blog

Chatbox atau umum kita sebut buku tamu adalah widget yang utama untuk kita gunakan pada situs (blog) kita. Pemakaian Chatbox atau buku tamu yaitu untuk berikan jejak untuk pengunjung yang berkunjung ke situs (blog) kita. Nah, di kesempatan ini saya bakal mengulas keseluruhan perihal Cara Membuat Hidden ChatBox di Blog Anda atau buku tamu yang dapat Autohide dengan dilalui oleh pointer mouse.

Mau tau cara bikinnya? Lansung saja kita perhatikan dibawah ini.

1. Login ke akun Blogger anda.


2. Pilih Blog yang anda ingin edit.


3. Nah, setelah itu klik Tata Letak (pada tata letak ini anda akan mendapatkan layout tata letak blog anda, silahkan anda pilih dimana letak yang cocok untuk Chatbox ini)

 

Catatan : Jika memakai Blog Wordpress anda hanya perlu membuka Dashboard >>> Appearance >>> Add Widget, nah setelah itu silahkan untuk menaruh Chatbox dilayout yang anda inginkan

4. Setelah itu klik tombol Tambah Gadget, gadget yang ditambahkan adalah gadget tipe HTML/JavaScript

5. Nah, kemudian masukkan kode scriptnya dibawah ini:

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DUNqDs4tt8RaD9d04T6ewTxzUwchzRZ9VZAWnCWK1sNBnEM1MY3Sv9aR3n6hC3rY2UEv30WoQIesQoHgNIvLrQEHT_PK-xCPqvTrct3M56m01J7BWiHLhTPnt_4KoxWtVkBzkSitTILV/s1600/cbblue.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()">

 </div>

<div class="gbcontent">

<center>

<!-- 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=4158960&amp;boxtag=3zc3hr&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4158960" style="border:#ababab 1px solid;" id="cboxmain4-4158960"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4158960" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4158960"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.html"> widget! </a></span>

</div>

</center>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

Catatan :
a. Kalimat yang diberi warna Hijau, bisa anda ganti dengan URL gambar anda sendiri.
b. Kalimat yang diberi warna Merah, silahkan anda ganti dengan kode script milik Chatbox Anda.

6. Terakhir tinggal klik Save

Itulah sedikit tutorial tentang Cara Membuat Hidden ChatBox di Blog. Saya berharap artikel dapat bermanfaat bagi kita semua.

Tweet