berikut adalah penjelasanya silah kan di pelajari dengan detail dan semog bermanfaat
<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>
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/AVvXsEge8GX6axPVimEEFrAiMMe3oQNatzDWxvteu2lBPhZxj8lON4ygJnIhD9lbkKXxtvHy4uWYfpXN3FOlpzgCyyVFTN4i3Um-k3CNlJyMB_-d_fUgqHReeWV3d9IBKfqk3Zeulozxt4gRNfXZ/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....
Tidak ada komentar :
Posting Komentar