Sabtu, 17 Desember 2011

cara buat shoutbox tersembunyi

Shoutbox yang satu ini sama dengan shoutbox lainnya, hanya tempatnya yang berbeda. Dimana shoutbox itu ??? yah sesuai judulnya, shoutboxnya tersembunyi. Ini juga cara menghemat tempat diblkogmu jika blogmu sangat padat. caranya mudah kok :D

Berikut langkah-langkahnya:

1. Login ke www.blogger.com

2. Klik Tata Letak

3. Lalu klik Tambah Gadget

4. Lalu pilih HTML/JavaScript

5. Copy paste kode dibawah ini:


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJkgkaWW5ENt51dn4omSg9QHnEeudGzj3H1H2DbbBUqIsh2eV-1hXw7bdZrnCdnKZJ2aoU-G2zFR7TPafBTK8SE2p7dGsXQ45RgPPgqkc6BSIJxkJAUSIOi2zRgsV6xCiFXlk43i1qUUb8/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
<a href="http://www.ywstudy.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

*Ganti dengan script Shoutboxmu
*Ganti top:50px; angkanya untuk mengatur posisi

6. klik Simpan

SEMOGA BERMANFAAT !!!

0 komentar:

Posting Komentar