Cara Menyembunyikan Rolling Widget Buku Tamu

Daripada menempatkannya di halaman artikel, yang jika dibuka suka lama loading page-nya, mendingan dibuat "ngumpet". Caranya juga gampang aja kok, karena sebenarnya widget ini bukanlah widget baru melainkan rolling widget yang script-nya sedikit dimodifikasi.

Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya:

• Kopikan script di bawah ini :
  
  <!-- Mulai Rolling Widget -->
  <style type="text/css">
  #gb{
  position:fixed;
  top:10px; /*jarak dari atas*/
  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:

Cara Pertama

• 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...

Cara Kedua

• 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...

Setelah itu buatlah sebuah link untuk menampilkan rolling widget, seperti berikut :

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

Kamu dapat menempatkan link ini pada navbar menu, sidebar, atau di tempat lain. Kamu juga dapat mengganti Buku Tamu dengan Guest Book, Chat Room, ShoutBox, atau yang lainnya.

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

Semoga Bermanfaat

Artikel Terkait:

Seputar Blog

• Cara Penulisan / Kode Berbagai Style di CBOX
• Cara Membuat Banner Iklan di Blog
• Cara Membuat Banner Animasi Secara Online
• Cara Memasang Iklan di Bawah Judul Postingan Blogger / Blogspot
• Shoutmix Tidak Gratis Lagi Sekarang
• Cara Menghapus Komentar di C-BOX
• Cara Upload JavaScript Menggunakan Google Code
• Merubah Tampilan Cursor Saat Diarahkan Ke Link
• Cara Menghapus Comment Di ShoutMix
• Cara Cepat Terindeks Google dengan Ping Service
• Memasang Sistem Komentar DISQUS pada Blogspot
• JS-kit Comment: Modifikasi Sistem Komentar di Blogger
• Merubah Kotak Komentar Dengan Intensedebate
• Cara Mengganti Tulisan Posting Lama,Beranda,Posting Baru
• Membuat Google Translate Tabbed untuk MengHemat Tempat
• Membuat Rolling Widget Buku Tamu (Widget Bergeser)
• Membuat Kotak Komentar Tampil Beda
• Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog
• Merubah Tampilan Labels Blog
• Merubah Tampilan Skin Label Di Blogger
• Memasang Musik di Blogger
• Memasang Music Pada Background Blog
• Memasang System Tuker Link Otomatis Pada Blog
• Membuat Banner Untuk Header