Jumat, 04 Mei 2012

Membuat (Chatting Box) Blog

Chatting Box pada blog bisa digunakan untuk berkomunikasi secara langsung antar pengguna yang membuka blog sama. Hal ini akan mempererat hubungan dan silaturahmi mereka.

Caranya membuatnya

Pertama - tama log in dulu Blog anda disini, pada dashboard klik tata letak (appearance) kemudian klik "Tambah Gadget" kemudian akan muncul window baru "Tambahkan Gadget" lalu anda klik tanda tambah HTML/JavaScript kemudian akan muncul window "Mengkonfigurasi HTML/Javascript" lalu biarkan window tersebut terlebih dahulu.
Selanjut copy_kan Script HTML berikut ke window tadi yang kita biarkan

<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://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;

background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnRErsACx7R-D-BpTzUOBV7XSzCWm2e5LF0-IungHi5SyNaMwXQ15U0VGyP0TZqJotd3tZndNLXyW0NHvbaZ8u9Gd1XEz7KZJ_IJ5r5VOqOFvJ1pivkUOijd8bjVdll4wNqEiRzmwrhFY/s1600/api.gif) 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>

<div id="cboxdiv" style="width: 200px; height: 380px;"></div>

<script type="text/javascript">

var cbvis = false;

var cbload = false;

function togglecbox () {

var cbdiv = document.getElementById("cboxdiv");

if (!cbvis) {

if (!cbload) {

cbdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www2.cbox.ws/box/?boxid=2307272&boxtag=zyhc4e&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2307272" style="border:#48515A 1px solid;border-bottom:0px" id="cboxmain2-2307272"></iframe><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2307272&boxtag=zyhc4e&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2307272" style="border:#48515A 1px solid;border-top:0px" id="cboxform2-2307272"></iframe>';

cbload = true;

}

cbdiv.style.display = "block";

}

else {

cbdiv.style.display = "none";

}

cbvis = !cbvis;

}

</script>



<script>togglecbox();</script>

<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>

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

Kemudian pastekan script HTM tersebut pada blog anda dan kemudian disimpan. Untuk Script yang berwarna kuning harus didapatkan dari CBOX atau buka disini untuk tutornya. Suksma nggih.....kayun rauh...

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)