Tutorial Blog of Salon Oyah

Berikut ini adalah langkah2 untuk membuat Buku Tamu tersembunyi :

1. Masuk ke account blog Anda.
2. Pilih Tata Letak >> Elemen Halaman >> Tambah Gadget [dimana aja bisa], kemudian pilih "Html/Java Script". Catatan : klo aq taro kode ini tepat di bawah header, spy loading-nya lbh cepat...
3. Kemudian COPAS (copy and paste) kode berikut :

<style type="text/css">

#gb{

position:fixed;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

}

.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;

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<br/>

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

* Pada kode diatas, ganti kode <!-- Ganti ini dengan kode Buku Tamu Anda-->  dengan kode Buku Tamu Anda yg diberikan oleh penyedia-nya, misalnya dr CBox, ShoutBox, Oggix, ShoutMix, dll.
Btw, kode ini hrs persis/lengkap spt yg diberikan oleh penyedia-nya, jgn sampe ad yg kurang sedikitpun. 

Kalo aq, aq bikin sendiri dulu model tombolnya, pake MS-Word, truz q insert di MS-Publisher, dan q 'Save As Picture' dan q upload ke PhotoBucket, baru q pake alamat di PhotoBucket sebagai pengganti link tsb. Pusing? Yawdah, pake tombol dr link itu az... Btw, klo tar ad wkt dan pengen nyoba2 sndiri, bisa dicoba cara aq... 

* Kalau ingin mengubah posisinya ke atas sedikit, ubah kode top:50px; dengan mengganti angka 50 dengan keinginan Anda, contoh 30px. Klo aq pake 5px, spy gak trlalu ke bwh.

* Okelah, kalaw begituw... selamat mencoba, smoga tutorial ini bermanfaat .... semoga hari ini jga menyenangkan bwt Anda... have a nice day, everyone... I luv y'all.... mmmmmuuuuuuaaaaacccchhhh...

* Special thanks for my friend >> Rizal Saputra, yg telah memberi inspirasi tutorial ini... sukses aja bwt kang Rizal... Oooyyyeeee...