Tutorial Cara Membuat Buku Tamu (ShoutBox) Terbuka Otomatis Tanpa Diklik

Buat sobat blogger yang ingin memodifikasi kotak buku tamunya (ShoutBox) agar bisa terbuka tanpa diklik, saya punya sedikit tips.
Langsung aja dicoba langkah demi langkah berikut, dijamin berhasil..



1. Login Blog
2. Rancangan --> Elemen halaman --> tambah widget --> HTML/Javascript
3. Lalu masukkan kode dibawah ini.
<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(http://1.bp.blogspot.com/_O84nraTVNhw/TVAOSS5OUpI/AAAAAAAAAPs/SjzZrVNr21w/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>

ISI DENGAN KODE BUKU TAMU ANDA

<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>
4. Kemudian ganti ISI DENGAN KODE BUKU TAMU ANDA dengan script buku tamu (shoutbox) milik anda.

5. Jangan lupa di save, selamat mencoba..
ref 

Post a Comment