Cara Membuat Buku Tamu Open Close
Chatbox atau buku tamu saat ini sering digunakan oleh beberapa blogger untuk mempermudah pembaca berinteraksi dengan admin atau sekedar meninggalakan jejak.
Dan beberapa diantara blogger, memasang chatboxnya di samping dengan mode buka tutup, supaya blognya tidak terlihat sesak namun tetap tampil profesional.
Dan pada postingan ini saya akan membahas Cara Membuat Buku Tamu Buka Tutup Di Blog. Langsung saja lihat langkah-langkah nya di bawah ini.
* Login ke Blogger
* lalu pilih Tata letak
* Klik Tambah Gadget/Widget dan Copy dan paste kode HTML berikut pada box konten :
<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://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">
Kode HTML Buku Tamu Sobat
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://fauzischolovers.blogspot.com/2013/06/cara-membuat-buku-tamu-buka-tutup-di.html">
disini
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">
Kode HTML Buku Tamu Sobat
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://fauzischolovers.blogspot.com/2013/06/cara-membuat-buku-tamu-buka-tutup-di.html">
disini
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>
Selamat mencoba.
NB: Jika belum punya akun Cbox/Buku Tamu Silahkan Lihat Disini
Post a Comment for "Cara Membuat Buku Tamu Open Close"