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, jika kita tetap menjejal-jejalkannya maka blog kita pun akan terlihat padat dan terkesan penuh sesak hingga tidak enak dipandang mata. Lalu, bagaimana solusinya? Pastinya kita akan melakukan penghematan ruang dengan melakukan siasat membuat widget tersebut tersembunyi dan akan muncul bila diklik.

 

Jika kita amati, sekarang banyak sekali 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, karena ukurannya yang besar dan memakan tempat, maka banyak blogger yang kemudian memilih untuk mengemas buku tamu di blog mereka dengan tampilan hidden atau tersembunyi agar 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 kode 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 kode html buku tamu dari blog kita masing-masing.

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

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Tool Gadget. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Tool Gadget dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Blog Ryan pada tanggal Wednesday, 16 March 2011