Cara membuat gadget untuk chating di blog
Chatting Box pada blog bisa digunakan untuk berkomunikasi secara langsung antarpengguna yang membuka blog secara bersamaan. Hal ini akan mempererat hubungan dan silaturahmi mereka.
Caranya membuatnya
Pertama-tama Anda harus log in dulu Blog anda disini atau ketik sendiri www.blogspot.com.
Ketika Anda masuk di dashboard/tampilan awal blog - klik opsi lainnya - tata letak (appearance)
kemudian klik "Tambah Gadget"
kemudian akan muncul window baru "Tambahkan Gadget" lalu anda klik tanda tambah HTML/JavaScript.
Setelah itu akan muncul window "Mengkonfigurasi HTML/Javascript" lalu biarkan window tersebut terlebih dahulu.
Selanjut copy-paste Script HTML berikut ke window.
<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/AVvXsEjBNCRYNtNihQdwWOFwzYY_bsHOswAN2X__Rn5sbXOSkB-z45CaOhj5xJLe1Cd9J9E0czskCjWoyK6IYJh7x4jyBXV-7gl9_r0ZzwKADGFZ0FJwom1uV1CZILdywGqiQkRC7a-JEkpO69uy/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>
<!-- move the next line to the bottom of your <body> to defer the loading of your Cbox -->
<script>togglecbox();</script>
<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>
Sekarang coba Anda lihat hasilnya dan Andapun bisa langsung chating... ting... ting... ting....
3 komentar on Cara membuat gadget untuk chating di blog :
keren gan template blognya. salam kenal dari saya http://sambores.blogspot.com/
thank buat infonya salam kenal dari papua
Sip juragan,, semoga bermanfaat..
Post a Comment and Don't Spam!