Cara menyembunyikan buku tamu/ShoutMix(Buka-Tutup)

         Buku tamu atau Shoutmix sepertinya akan menjadi Widget yang wajib ada pada sebuah blog. 75% blog yang pernah saya kunjungi menggunakan fasilitas buku tamu ini. Ada yang menggunakan warna standar, ada yang sudah mengubah warna dan style, dan ada juga yang membuat Buku Tamu tersembunyi( Shoutmix Auto Hide ). Khusus untuk buku tamu tersembunyi ini, ada 2 macam cara yang dilakukan oleh sobat blogger. Yang pertama buku tamu tersembunyi dengan kunci untuk menampilkannya berupa link yang dipasang pada sidebar yang biasanya menggunakan kata "Buku Tamu" atau "shoutmix" dan diberi title "Buka Tutup Buku Tamu". Sedangkan yang kedua, buku tamu yang tersembunyi dengan hanya menampilkan kunci untuk membukanya. Kunci ini akan menjadi floating image atau gambar melayang yang apabila di klik akan menampilkan atau menutup buku tamu. berikut contoh gambarnya dalam posisi tersembunyi ( perhatikan lingkaran biru )

ini contoh gambarnya dalam posis SHOW / setelah tulisan buku tamu di Klik

 
Jika sobat tertarik dengan Buku Tamu Tersembunyi ini, ikuti petunjuk berikut ini :


1. Masuk ke account Blogger sobat, pilih Layout; kemudian Page Elements;

2. Klik “Tambah Gadget”, kemudian pilih “HTML/JavaScript“

3. Copy kode di bawah ini lalu paste pada HTML/JavaScript tersebut. Berikut kodenya:


<br />

<style type="text/css">

#gb{

position:fixed;

top:100px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:40px;

float:left;

cursor:pointer;

background:url('http://i889.photobucket.com/albums/ac91/aliefjie/Satu/BukuTamu.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style><br />

<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><br />

<div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent">PASANG KODE SHOUTMIX SOBAT DISINI

<br />

<br />

<br />

<br />

<a href="http://awaluddink.blogspot.com">DANAGARA Community<br />

</a><br />

<div style="text-align:right"><a href="javascript:showHideGB()"><br />

[close]<br />

</a><br />

</div></div></div><script type="text/javascript">

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

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

</script><br />

<br />

Selesai.....

Sebelum dipasang, Jangan lupa sesuaikan dulu. Ganti tulisan "PASANG KODE SHOUTMIX SOBAT DISINI" dengan kode shoutmix sobat. Trus untuk mengubah posisi tulisan buku tamunya ubah saja nomor atribut TOPnya dari 20px menjadi lebih banyak (30px misalanya) atau lebih kecil (10px), semakin kecil nilai PXnya posisinya semakin keatas. Satu lagi, kalau ingin mengganti gambar tulisan buku tamunya silahkan buat gambar sobat sendiri dengan ukuran 30px x 100px lalu upload di tempat image hosting sobat dan ganti url yang terdapat setelah tulisan background: dengan url gambar sobat. OK.... selamat berXperimen

http://www.situskerenku.co.cc/2010/08/cara-menyembunyikan-buku-tamu-shoutmix.html 

Artikel Terkait: