Buku Tamu/ShoutBox

Penting sekali sebuah blog memiliki Buku tamu/shoutbox, selain colom komentar yang memang sudah tersedia, pada postingan kali ini saya akan bahas tentang Buku tamu tersembunyi maksudnya ketika blog kita dibuka widget bersembunyi dan ketika di klik oleh pengunjung. Nah lebih ngirit tempat selain itu juga untuk memper indah blog Sobat, dan Blog terlihat simple.
Bagi yang belum memiliki shoutbox/buku tamu silahkan klik disini untuk mendaftar terlebih dahulu.

Isi semua data yang dibutuhkan, contoh dibawah ini :

Jangan lupa beri tanda centang (√) pada I have read and agree to the Terms of Service. Setelah itu klik continue

Jika berhasil akan tampak seperti gambar dibawah ini

Untuk pengaturan warna dan model silahkan ke kolom “Display”

Setelah get codes diklik Akan terlihat seperti tampilan di bawah ini

Atur width dan height sesuai kebutuhan, copy paste Generated codes pada Gadget anda

Berikut cara memasangnya di blog Sobat :

1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.

2. Klik Tata Letak / Layout

3. Tambahkan gadget dengan mengklik Add a Gadget

4. Pada menu yang tersedia, pilih atau klik HTML/Javascript

5. Selanjutnya masukkan kode berikut di bawah ini dengan cara copy dan paste pada kotak from HTML tersebut…

height:100px;

width:30px;

float:left;
cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91mRilJQPDNH55jKfuJ0HrZ0Bum2h7O0EBxOYaiAeu2rmS_J_Rx94Y9WAgY6iNxUVBfMJ_7pKWE3Fc0wVQj6gjBgZPI_Mrhe6wuUK-sLKjK7pS2s0oZcp0M_Y8Mb9nmdboW1o6YyzHmNq/') 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">

<-- kode buku tamu kamu disini -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :

- Pada kode di atas, cari kode tanda seperti <-- kode buku tamu kamu disini --> dan ganti kode tersebut dengan kode buku tamu yang baru anda buat atau jika sudah punya buku tamu yang lama..

- anda juga bisa mengatur posisinya. dengan mengganti nilai atribut top-nya. jika ingin lebih ke atas dikit, ubah jadi 30px atau 20px, ubah sesuai selera anda.

- Kode warna merah adalah gambar buku tamu andat bisa ganti

- Kode warna hijau adalah tebal dan tipisnya border.

6. Klik Save/ Simpan

selesai ...mudah bukan..

Selamat mencoba semoga berhasil...