Membuat buku
tamu melayang/sembunyi disisi kanan blog dan bisa dibuka tutup berguna untuk
menghemat ruang sidebar blog. Ruang yang sebelumnya terpakai buku tamu cbox
mungkin bisa digunakan untuk pasang iklan, atau pasang widget lainnya.
Buku tamu
yang akan dipasang melayang maksudnya bukan melayang-layang seperti terbang
kemana-mana, tapi buku tamu tersebut berada diatas blog dan posisinya sebelah
kanan dan akan muncul saat diklik tombol buku tamunya. Bila diklik lagi tombol
buku tamunya, buku tamu chatbox akan menghilang/sembunyi ke pinggir.
Ok, Tanpa panjang lebar silahkan langsung copy
paste kode/script berikut ke gadget HTML/Javascript di blog:
<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/AVvXsEhmhScTafCiD6fdcN8ek7r-qDRK8RPB00YHQgNk3zweESoxo33PUcktnI9rFugIjfmxVJdUET19OZCkGkRoNHujOlkQRq9ZTxvdFvgYjhvKOr4Qcc3QP09iSpWTdmAEU5RXP-TLaDn8p9g/s1600/bukutamu.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">
KODE CBOX DISINI
<div style="text-align:right">
</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhScTafCiD6fdcN8ek7r-qDRK8RPB00YHQgNk3zweESoxo33PUcktnI9rFugIjfmxVJdUET19OZCkGkRoNHujOlkQRq9ZTxvdFvgYjhvKOr4Qcc3QP09iSpWTdmAEU5RXP-TLaDn8p9g/s1600/bukutamu.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">
KODE CBOX DISINI
<div style="text-align:right">
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Hapus text yang diberi warna merah diatas dan tempatkan kode HTML cbox anda
disana. Jika anda belum punya, bisa Lihat Disini.
Semoga artikel Cara Membuat Buku Tamu CBOX
Melayang atau Bisa Buka Tutup di Blog ini bermanfaat. Selamat mencoba dan
semoga berhasil... (^_^)
0 komentar:
Post a Comment
Silahkan tinggalkan komentar anda tentang tulisan ini...