salju

Kamis, 26 April 2012

cara menyembunyikan widget dengan spoiler



hai sobat via semua
hari ini aku akan share kepada kalian semua cara membuat spoiler.
spoiler adalah sebuah tombol yang berfungsi untuk menyembunyikan postingan, gambar, video atau pun widget-widget. 
Tapi saat ini aku akan membagikan cara membuat spoiler untuk menyembuyikan widget saja.
prinsip dari spoiler ini adalah show hide/ buka tutup, dimana jika tombol spoiler dalam keadaan tertutup ditekan maka elemen yang disembunyikan akan keluar sebaliknya jika tombol spoiler yang dalam keadaan terbuka ditekan maka elemen yang ada di spoiler akan tersembunyi.
tujuan dari spoiler ini adalah untuk menghemat space atau tempat
langsung saja, saya uraikan langkah-langkahnya sebagai berikut :
1. klik desain-tata letak
2. add gadget
3. pilih Html java script
4. masukkan script dibawah ini :

<center><div><div style="margin-bottom: 2px;"><i><b><small></small></b></i><input value="Pendukung" style="margin: 0px; padding: 0px; width: 120px; font-size: 12px;font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;BUKA&#39;; }" type="button" /></div>
<div style="border: 0px inset ; margin: 0px; padding: 0px;"><div style="display: none;">

Isi kode Gadget

</div></div></div></center>


pada tulisan warna merah itu adalah lebar spoilernya, dan tulisan yang berwarna biru adalah nama judul dari spoiler kamu.


sekian postingan saya kali ini
semoga bermanfaat :)

5 komentar:

  1. salam sukses gan, bagi2 motivasi .,
    Bersabarlah dalam bertindak agar membuahkan hasil yang manis.,.
    ditunggu kunjungan baliknya gan .,.


    BalasHapus
  2. Kalau scriptnya banyak, bagaimana pengaruhnya pada kecepatan loading blog mbak? salam kenal...

    BalasHapus
  3. aku coba ya... bismillah...

    BalasHapus