Tip Sederhana Membuat Menu Menarik Dengan Spoiler

SPOILER

Kali ini saya men-share-kan pengalaman saya tentang penggunaan Spoiler di blog Pandawa Lima ini. Mungkin kalau sohib mencarinya dengan search engine seperti google ataupun yahoo,  sudah barang tentu akan banyak sohib dapatkan informasi ataupun postingan mengenai Spoiler ini. Dan salah satu sohib Pandawa Lima yaitu Mulkan hanim ada menanyakan hal tersebut. Dan baru hari ini bisa saya mem-posting Tip Sederhana Membuat Menu Menarik Dengan Spoiler. Semoga bisa bermanfaat buat semua orang terutama sohib Pandawa Lima

Spoiler adalah sebuah kolom yang bisa dibuka dan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat ruang halaman saat memposting gambar atau tulisan yang banyak sehingga terlihat tertata dan rapi. Bisa sohib lihat contohnya pada menu BANER SOHIB di footer blog Pandawa Lima ini.


Berikut ini cara membuatnya :

1. Login Ke blog sohib
2. Klik Rancangan / Design
3. Klik Tambah gadget
4. Klik html / javascript
5. Lalu Copy paste kode di bawah ini

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>BANNER SOHIB</b>: <input value="TAMPILKAN" style="margin: 0px; padding: 0px; width: 70px; font-size: 11px;" 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;Close&#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;TAMPILKAN&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isikan kode, script, HTML atau Teks anda disini..

<br>
</div>
</div>
</div>

Keterangan:
1. Tulisan BANNER SOHIB adalah judul,bisa ganti sesuai keinginan Sohib
2. Tulisan yang berwarna biru bisa sohib ganti sesuai dengan tulisan/scrip yang ingin sohib masukkan pada kolom bagian dalam spoiler.

Contohnya :

Contoh Spoiler dalam keadaan tertutup

Contoh Spoiler dalam keadaan terbuka

Semoga bermanfaat ya..
PANDAWA LIMA

sumber :
http://kumboyono-software.blogspot.com