Tekno saat ini

• Kopikan script di bawah ini (gunakan Control C):

  
  <!-- Mulai Rolling Widget -->
  <style type="text/css">
  #gb{
  position:fixed;
  top:10px; /*jarak dari atas*/
  right:0px;
  z-index:+1000;
  }
  * html #gb{position:relative;}
  
  .gbtab{
  height:100px; 
  width:30px; 
  float:left;
  cursor:pointer;
  background:none;
  }
  .gbcontent{
  float:left;
  border:2px solid #888888; /*warna bingkai*/
  background:#F0F0F0; /*warna latar*/
  padding:5px 10px 0px 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">
  <div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>
  
  Kode Shoutbox atau Buku Tamu
  
  <script type="text/javascript" src="http://enes-sc.googlecode.com/files/rollingwidget2.js"></script>
  </div></div>
  <!-- Selesai Rolling Widget -->
  

• Ubahlah ukuran jarak dari atas, warna bingkai, warna latar, dan judul sesuai keinginan kamu.
• Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.
• Selanjutnya kamu lakukan salah satu langkah atau cara berikut:

• Dari Dashboard akun blogger kamu, pilih Tata Letak - Elemen Halaman.
• Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
• Paste script Rolling Widget tadi dan jangan diberi judul (title).
• Setelah itu save dan ucapkan Alhamdulillah...

• Dari Dashboard akun blogger kamu, pilih Tata Letak - Edit HTML.
• Cari kode </head> pada script HTML template blog kamu.
• Paste script Rolling Widget tadi di bawah kode </head>.
• Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...

<a href="javascript:showHideGB()">Buku Tamu</a>

Tambahan

Bagi kamu yang ingin menggunakan rolling widget yang link untuk membukanya menggunakan gambar pojok/samping, seperti pada blog ini, silahkan baca artikel ini.