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: