Cara Membuat Rolling Widget Buku Tamu (Widget Bergeser)

Pernahkah melihat widget buku tamu (shoutbox) disimpan secara tersembunyi di sisi sebelah kanan blog. karena selain membuat tampilan blog akan terlihat semakin keren, juga dapat meminimalkan ruang sidebar blog, khususnya bagi yang senang memasukkan segala macam banner iklan gratisan (tidak dibayar) sehingga ruang yang tersedia semakin sempit.Untuk membuat rolling widget buku tamu tersebut. Hanya saja perlu di ketahui bahwa rolling widget buku tamu ini masih sulit untuk diterapkan untuk yang menggunakan shoutbox dari Oggix. Jadi kalau mau menggunakan rolling widget ini sebaiknya mengganti shoutbox-nya dengan Shoutmix atau Cbox.
Untuk membuat rolling widget buku tamu berikut ini adalah langkah-langkahnya:

• Kopikan script di bawah ini:
  <!-- Mulai Rolling Widget -->
  <style type="text/css">
  #gb{
  position:fixed;
  top:50px; /*jarak dari atas*/
  z-index:+1000;
  }
  * html #gb{position:relative;}
  .gbtab{
  height:100px; /*tinggi gambar*/
  width:30px; /*lebar gambar*/
  float:left;
  cursor:pointer;
  background:url("http://i30.tinypic.com/2cqh6yu.png") no-repeat; /*gambar*/
  }
  .gbcontent{
  float:left;
  border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
  background:#F0F0F0; /*warna latar*/
  padding:10px 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">
  
  Kode Shoutbox atau Buku Tamu
  
  <script type="text/javascript">
  var gb = document.getElementById("gb");
  gb.style.right = (30-gb.offsetWidth).toString() + "px";
  </script>
  <div style="float:left;"><a href="javascript:showHideGB()"><img src="http://i46.tinypic.com/o9mfma.jpg" title="Tutup" /></a></div>
  <div style='font-size:85%; float:right; margin-top:15px;'>
  <a href='http://ruangsc.blogspot.com/2009/08/membuat-rolling-widget-buku-tamu-widget.html' target='_blank' title='Cara bikinnya ada disini!'>Widget by SC Community</a></div>
  </div></div>
  <!-- Selesai Rolling Widget -->
  
• Ubahlah yang hurup yang diberi warna merah tebal sesuai dengan kebutuhan.
• Pada widget di atas disetting menggunakan gambar Buku Tamu hijau, seperti ini:
  tinggi gambar dengan 100px
  lebar gambar dengan 30px
  URL gambar dengan http://i30.tinypic.com/2cqh6yu.png
  ketebalan dan warna kotak dengan 2px solid #A5BD51
  Tapi jika mengginginkan yang biru (gambar Gueestbook), gantilah tinggi gambar, lebar gambar, gambar, ketebalan dan warna kotak dengan kode-kode di bawah ini:
  tinggi gambar dengan 130px
  lebar gambar dengan 35px
  URL gambar dengan http://i25.tinypic.com/jl5dsg.png
  ketebalan dan warna kotak dengan 3px solid #003399

• Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoutmix atau Cbox yang telah di miliki.
• Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog.
• Selanjutnya lakukan salah satu langkah atau cara berikut:

Cara Pertama

• Dari Dashboard akun blogger, 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.

Cara Kedua

• Dari Dashboard akun blogger, pilih Tata Letak - Edit HTML.
• Cari kode pada script HTML template blog (gunakan Control F atau F3 supaya memudahkan pencarian).
• Paste script Rolling Widget tadi di bawah kode , atau antara dan .
• Lakukan Pratinjau (Preview) sebelum menyimpan template.
• Jika sudah OK. Save template.