Pasang Chatbox Tersembunyi Versi 2

11.21 ---
Pada postingan sebelumnya sudah sudah menerapkan cara memasang chatbox pada blog dan menyembunyikan chatbox versi 1. Pada Tutorial kali ini saya akan menjelaskan cara menyembunyikan chatbox versi 2. Pada widget ini kita tidak dapat memasang widget ini keduanya (versi 1 dan 2). Anda harus memilih salah 1 yang ingin Anda gunakan.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.
3. Tambah Gadget ~> HTML/Javascript
4. Masukan kode di bawah ini.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:125px;
width:30px;
float:left;
cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1251.cur), progress;
background:url('http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #40d1fe;
background:#000000 repeat-y center;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Masukan Kode Chatbox Anda Di Sini.

<br />


<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
<span ><a href="http://alprablog.blogspot.com/2011/06/pasang-chatbox-tersembunyi-versi-2.html" target='blank'><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Keterangan : Ganti text yang berwarna merah dengan kode chatbox Anda.

6. Simpan.

0 komentar:

Posting Komentar