Membuat Widget Buku Tamu Tersembunyi

 

Biasanya tamu yang datang disuruh masuk dan duduk di kursi, tapi kali ini tamu yang datang malah disuruh ninggali komentar walaah-walah kasihan banget datang jauh-jauh hanya untuk nulis he..he..hee bercanda jangan dibuat tegang nanti cepet tua, he..he..he...

Oke, sekarang kita mau belajar membuat widget buku tamu di blog. Khususnya blogger. Sebenarnya cukup mudah membuat tampilan blog yang ada buku tamunya. Kenapa saya bilang mudah, karena caranya hanya copy paste doank.

Widget buku tamu ini sebetulnya ga beda amat sama kolom komentar yang ada di bawah postingan pada umumnya. Hanya saja kalo pake widget yang tersembunya terkesan lebih keren, iya nggak?

Jadi langsung aja nih kita mulai bagaimana membuat widget buku tamu di blog. Ikuti langkah nya sebagai berikut :

1. Masuk ke account Blogger kamu, dengan username dan password kamu
2. Pilih "Layout" kemudian "Page Elements",
3. Clik "Add a Gadget" 
4. Pilih "HTML/JavaScript",
5. Copy dan Paste kode di bawah ini:
   

   <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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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">
   
   <!-- Ganti ini dengan kode buku tamu kamu -->
   
   <br/>
   Mau punya buku tamu seperti ini?<br/>
   Klik di
   <a href="http://anasqu.blogspot.com/ (Info Blog)
   </a>
   
   <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>

6. Ganti  kode <!-- Ganti ini dengan kode buku tamu kamu --> dengan kode buku tamu kamu
7. Dengan berkreasi sedikit dengan mengatur posisinya, dengan mengubah nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, suka-suka
8. Selesai dan silahkan di coba. Kalo ngga jadi mungkin ada kesalahan. Sebab saya juga ngga pake widget buku tamu ini. Soalnya biasanya kalo blog kebanyakan kode javascript akan memper lambat loading blog tsb. Trims...