flas script


Cara menyembunyikan buku tamu Versi 2013

Sebenarnya ada beberapa alasan sehingga blogger menyembunyikan buku tamunya... Tapi secara umum yakni agar tampilan blog semakin lega dan keren... Jika buku tamunya di simpan di sidebar, tentu saja hal semacam ini akan memakan ruang yang cukup banyak bukan??? Oleh karena itu, mengapa chat box maupun shout box pada umumnya di tempatkan tersembunyi di bagian sudut blog yang mudah dilihat oleh pengunjung...

Langsung saja yah, di bawah ini saya sediakan 2 pilihan script buat menyembunyikan chat box maupun shout box, yang satu dengan menggunakan knop atau tombol yang membuka ke samping saat di klik dan yang satunya lagi dengan cara open close. Berikut scriptnya:

1. Dengan menggunakan tipe buka tutup ke samping (knop):

<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('http://b.imagehost.org/0611/buku-tamu.png') 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">

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini

<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>

2. Dengan menggunakan tipe Open Close, scriptnya yakni:

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup boss ]</b></a></div>

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini

</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i51.tinypic.com/2meeej8.gif"/>
</a>
</div>

Jika sobat ingin mendesain sendiri gambar tampilannya, silahkan sobat ganti url yang berwarna merah dengan url gambar sobat ! Semoga sobat berhasil membuat chat box dan shout box nya tersembunyi dan tampilan blog sobat menjadi lebih simpel serta keren.

Cara Membuat Blog :
Kembali ke Site Map / Daftar Isi di Blog Ini, Klik Di Sini !


0 komentar:

Diberdayakan oleh Blogger.
Twitter Delicious Facebook Digg Stumbleupon Favorites More