11 September 2011

Cara Membuat Show-Hidden Box


Seperti judul yang sudah saya posting yaitu membuat Show Hidden Box di Blogspot. hasilnya pun cukup spektakuler, disamping manfaatnya untuk menghemat tempat juga untuk mempercepat loading blog tentunya ikuti langkah-langkah berikut kalau sobat blogger berminat untuk membuatnya :-) Sesuatu banged (^_^)

  1. Login to BloGGeR.
  2. Setelah masuk di halaman Dasboard, KLIK link Design/Rancangan.
  3. Design/Rancangan : KLIK Add Gadget/Tambah Gadget
  4. KLIK HTML/Javascript.
  5. Pastekan seluruh Javascript Show-Hidden dan kode HTML Widget yang akan dipasang.
KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog


Javascript


<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/AVvXsEh7UlNzR2Dn4MSGGm1IIovaqKWxUv810XQO0dWPIBaQTCTu2Ajam-2zxXpjEO_mSI4KWYqEFRpa8zsN05k2cdA5kjYCi9GjKng-SGmMHQx2Xl690xyZ3eLDMj9VdbBcCfhI7nRmp73KjLQ/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 akan di sembunyikan di sini!

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



· Ganti Teks yang bertuliskan Letakkan widget yang akan di sembunyikan di
sini! dengan Kode HTML Widget yang akan di pasang.
· Ganti Judul/Nama Widget sesuai widget yang digunakan.
· width:260px; merupakan lebar show hidden. Sampeyan dapat merubahnya sesuai ruang yang tersedia.
Semakin kecil maka akan semakin sempit.

Selamat Mencoba Semoga berhasil.......dan tetaplah terus berkreasi.........


Artikel Terkait

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon