Membuat Buku Tamu Hidden yang Unik

Hmmm….buku tamu salah satu media berkomunikasi sekaligus media promosi blog kesayangan kita, apalagi kalau buku tamunya unik, enak dilhat, dan mudah digunakan orang lain. Dijamin pengunjung blog kita pasti mau kembali lagi, hehehe…

Untuk membuatnya kita tinggal memilih shoutmix, cBox dan lain sebagainya. Kalau saya sih pake cBox, habisnya kalau pake Shotmix awal tahun ini kudu bayar...
Ummmmm.....saya merasa beruntung sekali ada widget ini, tanpa ini blog saya tidak akan rame, hehehehe…

Apabila sobat-sobat mau buat buku tamunya hidden (sembunyi/menyelip di samping) seperti saya silahkan copy kode script dibawah ini yang dimasukkan ke dalam gadget/widget HTML .

<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://i39.tinypic.com/iqwo7a.jpg') 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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="hendro_fadly" src="http://www.shoutmix.com/?hendro_fadly" width="150" height="400" frameborder="0" scrolling="auto">

<a href="http://www.shoutmix.com/?hendro_fadly">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

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

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

[CLOSE]

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

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

</script>

Nah…script dibawah <div class="gbcontent"> adalah kode adalah script dari buku tamu saya, sobat bisa mengganti script dibawah ini dengan script buku tamu sobat.

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="hendro_fadly" src="http://www.shoutmix.com/?hendro_fadly" width="150" height="400" frameborder="0" scrolling="auto">

<a href="http://www.shoutmix.com/?hendro_fadly">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

Apabila mau mengganti gambarnya, sobat harus membuat gambar buku tamunya sendiri, hehehe…

Hasil kreasi gambar punya sobat bisa di upload melalui http://tinypic.com atau photobucket dan lain sebagainya, yang penting uda dapat kode URL nya.

untuk gambar buku tamu blog saya berukuran 32x100. Apabila mau berkedip-kedip tulisannya silahkan klik link ini http://hendro-sinichi-kudo.blogspot.com/2011/08/membuat-banner-link-berkedip-kedip.html

Nah…setelah gambarnya uda jadi & selesai diUpload, sobat tinggal mengganti kode ini

background:url('http://i39.tinypic.com/iqwo7a.jpg') no-repeat;

Ganti  'http://i39.tinypic.com/iqwo7a.jpg' dengan kode link dari gambar yang selesai di ulpoad tadi. Ingat yang dicopy adalah alamat Direct Link for layout.

Eh…iya ini semua saya pelajari dari http://araya19.blogspot.com/2011/04/membuat-buku-tamu-shoutmix-tersembunyi.html

Semoga berhasil ^_^