Hide Your Guest Book

Ilustration

Nah, pada hari raya umat islam yakni Idul Adha yang ke 1431 Hijriah, kali ini saya akan membagi bagaimana cara untuk menyembunyikan Chat Box, Shout Box (Shoutmix), Oggix Box, dan sebagainya..Sebenarnya cara ini bukan hanya untuk menyembunyikan Guest book, namun anda juga bisa melakukan trik ini untuk mencapai suatu tujuan yang lain..
Oke, untuk demonya silahkan lihat gambar berikut -->
Nah, yang akan kita buat nanti adalah Buku Tamu yang keren! seperti berikut
<--

Bagaimana? Apakah anda tertarik? Jikalau memang tertarik, mari kita buat bersama sama..

1. Login ke blog anda --> Design --> Add Element --> HTML/JavaScript

2. Letakkan kode berikut

<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://3.bp.blogspot.com/_4UbMBmk0yJY/TOOx12VnyKI/AAAAAAAAAVs/x-AwOS9h0o4/s1600/tabs.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">
*/NAH DISINI ADALAH KODE DARI GUEST BOOK ATAU YANG LAIN SESUAI SELERA ANDA */
<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>

Bagaimana? Keren bukan? Silahkan mencoba!

Tweet

Artikel Terkait: