Membuat Hidden Guest Book

Terkadang dalam mengatur fitur rancangan sebuah blog kita dihadapkan pada permasalahan terbatasnya space atau ruang kosong untuk menaruh widget-widget kesukaan kita. Sebagai konsekuensinya, kalau kita tetap menjejal-jejalkannya maka blog kita pun akan terlihat padat dan terkesan penuh sesak hingga tidak yummy dipandang mata. Lalu, bagaimana solusinya? Pastinya kita akan melaksanakan penghematan ruang dengan melaksanakan siasat menciptakan widget tersebut tersembunyi dan akan muncul bila diklik.

 

Jika kita amati, kini aneka macam blogger yang mengaplikasikan hal itu pada widget buku tamunya. Yup, buku tamu memang salah satu pernak-pernik blog yang dianggap paling utama untuk dimiliki. Akan tetapi, sebab ukurannya yang besar dan memakan tempat, maka banyak blogger yang lalu menentukan untuk mengemas buku tamu di blog mereka dengan tampilan hidden atau tersembunyi semoga lebih menghemat ruang dan terlihat gaya.

Bagaimana cara membuatnya?

1. Log in ke dalam akun blogger milik kita.
2. Klik rancangan.
3. Pilih add gadget dan klik HTML/Java Script.
4. Masukan instruksi di bawah ini dan klik simpan.

<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://lh4.ggpht.com/_NSa8I94a3wg/TJHDAQiJqSI/AAAAAAAAAGo/0LukH8E000Y/s800/tabs_asep.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #cd8c3d;

background:#050505;

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


LETAK KODE HTML GUEST BOOK KITA


<div style="text-align:right">

<a href="">

</a>|<a href="javascript:showHideGB()">

[tutup guest book]

</a>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

Keterangan :

• Ganti LETAK KODE HTML GUEST BOOK KITA dengan instruksi html buku tamu dari blog kita masing-masing.

Bagaimana? Praktis sekali bukan membuat hidden guest book?
Yuk kita coba praktikin bersama-sama..
Kalau ada perhiasan yang ingin disampaikan, silakan berkomentar ya kawan-kawan..
Salam blogger!

Share this post