2 Cara Membuat Show-Hidden Widget

Membuat show-hidden widget blog boleh menjadikan blog anda cantik dan yang lebih penting menjimatkan ruang. Beberapa widget mungkin dapat kita tampilkan dalam box tersembuyi dan hanya akan terlihat apabila  seseorang pengunjung menginginkannya saja.

Selain itu, dengan memasang fungsi ini diharapkan dapat memberi peluang blogger untuk memunculkan tampilan baru yang lebih indah. Dengan membuat button yang cantik dan menarik. Berbagai bentuk button, baik berupa gambar biasa atau animasi, css3 button, teks dan box dengan shadow efects juga boleh anda gunakan bagi membuat tampilan yang berbeza.

Dengan ini, anda tidak terlalu banyak mengambil ruang yang banyak untuk pelbagai widget yang anda pasang.

Cara Membuat Show-Hidden Box di Widget Blogspot 

 

<script type='text/javascript'>
  if(typeof(rnd) == 'undefined') var rnd = '';
  rnd = Math.floor(Math.random()*1000);
  rnd = 'id-' + rnd;
  document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
  </script>
  <center>
  <div style="background:#b3c8ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1G9cIBvkZv20gdoF2NusJjFYiUxDZ5Jg1x624kqZLb5zDyZgprJT2uNUOU3bCIHQ-lcWbmYay4PwvjnLslLFIuqgCfXzxes1glsNc-34Sxf18FNONYsvWllxKYt8LC7ckLOtjUBH15q0/s320/Untitled-55-copy.gif) left top repeat-x;width:260px;padding:2px 0;">
  <p style="background:#98d6e5 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeV71H1.gif) left top repeat-x;font-size:14px;font-weight:bold;color:#012750;font-family:Tahoma;padding:4px;border:1px solid #333;margin:5px;">Judul/Nama Widget<br />
  <img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="112" height="28" style="margin:2px auto;" /></p>
  <script type='text/javascript'>
  document.write('<div id="' + rnd + '" style="display:none;padding:8px;background:#e1eaf1;margin:0 5px 8px;">');
  </script>

Letakkan widget yang nak disembunyikan di sini!

<script type='text/javascript'>
  document.write('<\/div>');
  </script>
  </div>
  </center>

Langkah menggunakan Show-Hidden Widget

1. Login to blogger.
2. Setelah masuk di halaman Dasboard, KLIK link Design.
3. Design: KLIK Add Gadget/Tambah Gadget.
4. KLIK HTML/Javascript.
5. Pastekan seluruh Javascript Show-Hidden dan gantikan Letakkan widget yang nak disembunyikan  di sini! dengan kode HTML Widget yang akan dipasang.
6. width:260px; merupakan lebar show hidden.
7. KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog.

Anda sedang membaca artikel Cara Membuat Show-Hidden Widget dan link url bagi entri ini adalah http://manmala.blogspot.com/2011/10/cara-membuat-show-hidden-widget.html. Semoga artikel Cara Membuat Show-Hidden Widget ini bermanfaat buat anda.