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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2SsKtg1wiGZDfCnPLdReI0x_QrvbZC5AiMEAnuyeN6fyZV4PX-9a0aN41BD1qOrP5vbjOkROGLswvywgOl3guQ_1LFy9k9rR-_bhmNrPSKmYiu9hDih2xFmAVcKiixqDWfl5zkMBhXx6/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:

Gadget

• Info | Galaxy S diUpdate Jadi Gingerbread, Galaxy 5 dan 3 Akan Gunakan Froyo
• Membuat Fixed Footer
• Cara Membuat Sitemap Di Blog
• Cara Membuat Sitemap Accordion Di Blog
• New Gadget : Entri Populer
• New Gadget : Statistik
• Form Above Posts Pada Cbox
• Solusi Handphone Terkena Air
• Perbedaan Antara Layar STN, CSTN, TFT, TFD, UFB, dan OLED

Trick Blog

• Trick Blog | Recent Post With Thumbnail Horizontal
• CSS3 | Transform Rotate : Memutar Text / Gambar
• Trick Blog | Berbagai Macam Cursor
• CSS3 | Create Beautiful Button
• CSS3 | Create Bubble Coda Style
• CSS3 | Membuat Background Pada Web Full Page
• Membuat Facebook Fans (Like Box) Pada Blog
• Membuat Background Efek Gradient Dengan CSS3
• Menyembunyikan Avatar Pada Komentar Blog
• Cara Memberikan Image Verification Pada Komentar