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!

9 komentar:

  1. manstrab gaaann..!!!!!!
    ini yang ane tunggu-tunggu baru keluar sekarang juga. ahahahay, trims informasi'na,

    BalasHapus
  2. keren nich, apa bisa digunakan di wordpress ya?

    BalasHapus
  3. wao, keren boy..
    menghemat tempat n terkesan elegan.
    sip, daahh..
    thx eaa..

    BalasHapus
  4. untuk wordpress tidak bisa, karena wordpress tidak mendukung penggunaan java script seperti halnya blogspot dan itu lah salah satu kelemahannya wordpress.
    buku tamu hanya bisa di tampilkan dalam bentuk biasa tanpa bisa di hidden. :-)

    BalasHapus
  5. @hary:

    trims sudah berkunjung bro. :)

    BalasHapus
  6. @info:

    lain kali jangan gunakan link hidup di dalam komentar blog. :)

    BalasHapus
  7. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    silahkan berkunjung di intanqq

    BalasHapus