Home » » Cara Cepat Membuat Chat Box Tersembunyi Pada Blog

Cara Cepat Membuat Chat Box Tersembunyi Pada Blog


Hai Sobat Kali Ini Saya Akan Berbagi Pengetahuan Tentang Cara Membuat ChatBox Tersembunyi Di Sebelah Kanan Blog. Taukan Gimana Contohnya? Pasti Taulah! Gak Mungkin Seorang Blogger Yang Udah Lama Terjun Di Dunia Yang Penuh Persaingan Ini Gak Tau Sama Yang Namanya "ChatBox". Saya Sengaja Gak Masang ChatBox Di Samping Blog. Soalnya Kalo Pake Template Ini Kelihatannya Kurang Rapih. Jadi Sengaja Saya Taruh Tombol Aja Di Bawah Blog. Jadi Kalo Diklik, Akan Pindah Ke Page ChatBox. Coba Aja Dah Klik Biar Gak Bingung. Nah Untuk Yang Kali Ini Dibahas Adalah ChatBox Tersembunyi Di Blog. Coba Aja Deh Biar Gak Bingung.

1 . Sign Up Di CBOX 
2 . Setelah Terdaftar Log in Terlebih Dahulu
3 . Atur Tampilan CBOX Sesuai Selera Anda
4 . Setelah Selesai Klik Tab PUBLISH Dan Get Code ( Copy Kode Yang Berada Di Step 3 )




Kemudian :
Masuk ke Blogger, Pilih Tata Letak - Add Gadget - Pilih HTML/Javascript :Copy Code Dibawah ini ke dalam Gadget HTML tersebut. Ganti code Berwarna Biru dengan Code CBOX mu, Yang Telah Di Dapat Tadi .




<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('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.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://www2.cbox.ws/box/?boxid=2347515&amp;boxtag=tvzmgz&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2347515" style="border:#48515A 1px solid;" id="cboxmain2-2347515"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2347515&amp;boxtag=tvzmgz&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2347515" style="border:#48515A 1px solid;border-top:0px" id="cboxform2-2347515"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://azhariian.blogspot.com/2013/04/GuestBook-hide.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>




Simpan Dan Lihat Hasilnya Semoga Bermanfaat Dan Selamat Mencoba ..

2 komentar: