[BLOG] Cara Mudah Buat Buku Tamu Show Hide

Malam ini terasa sangat berbeda dengan Toni. Blognya ternyata dipuji oleh Pak Joko, guru komputer di sekolah Kabayan. Pujian itu diberikan dikarenakan blognya berisi tentang pengetahuan yang bermanfaat bagi banyak orang untuk segala umur. Untuk itu Toni bertekad untuk meningkatkan kualitas blognya di sisi penampilan. Buku tamunya dibuat berbeda sebelumnya yaitu dengan membuat sebuah tab di sisi kanan blognya bilamana diklik akan muncul buku tamu tersebut. Namun jangan dikira usaha mempercantik buku tamu di blognya itu berjalan mudah. Toni harus berselancar di dunia maya cukup lama untuk mencarinya, sampai akhirnya ia menemukannya di suatu blog dan ternyata itu blog temannya sendiri, si Kabayan. Blog itu adalah InfoKabayan.

Penasaran cara membuat buku tamu untuk blogger/blogspot/wordpress seperti yang ada di blog ini?
Baca artikel ini selengkapnya:


Oke kita langsung saja ke langkah-langkahnya:
1. Pertama login dulu ke Blogger

2. Pilih Tab Rancangan yang ada di Dashboard

3. Pilih Tambah Gadget pada elemen laman

4. Kemudian tambahkan HTML/JavaScript

5. Copy Paste kode berikut ini

 <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 CBOX -- END CBOX -->
<br />
<a href="http://infokabayan.blogspot.com">Klik ini untuk buat buku tamu
</a>
<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>

6. Keterangan begin end cbox diganti dengan kode javascript buku tamu milikmu.

7. Kode di atas mohon jangan diutak-atik karena kode tersebut sudah fix

Semoga bermanfaat.....

Artikel Terkait