Monday, June 6, 2011

Cara Membuat Show-Hidden Box di Widget Blogspot

Langsung aja ya sob keintinya Cara Membuat Show-Hidden Box di Widget Blogspot.
Langkah menggunakan Show-Hidden Widget
1. Login to BloGGeR.
2. Setelah masuk di halaman Dasboard, KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK Add Gadget/Tambah Gadget (box yang bergaris putus-putus).
4. KLIK HTML/Javascript.
5. Pastekan seluruh Javascript Show-Hidden dan kode HTML Widget yang akan dipasang.
6. KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog.

 

Berikut Scriptnya sobat :

<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/AVvXsEjf-K8Kyw3C0RqXtGV9xtWae-367_Y8SViyMTzjYHJ90GG7NjDRmOAX9HCkdZzMJsdT5b7-9o2T0a99ts8kG6HCLJ8hI96dDSVYIVBa4yQOrXogzQ2DxWQrdFv6tD2W7FUQMWiF6b2Dk1I/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>


Keterangan :
1. Ganti Teks yang bertuliskan Letakkan widget yang akan di sembunyikan di sini! dengan Kode HTML Widget yang akan di pasang.
2. Sebagai contoh, coba pasang kode HTML di bawah ini untuk menggantikan teks tersebut :
3. Ganti Judul/Nama Widget sesuai widget yang digunakan.
4. width:260px; merupakan lebar show hidden. Sampeyan dapat merubahnya sesuai ruang yang tersedia. Semakin kecil maka akan semakin sempit.

Nah sekian tutorial Cara Membuat Show-Hidden Box di Widget Blogspot.
semoga bermanfaat sobat..!!

No comments:

Post a Comment