Cara Membuat Spoiler

Cara Membuat Spoiler Berwarna - Karena ada request dari Sobat Deawa tentang Bagaimana Cara Untuk Membuat Spoiler, plus Berwarna . . .maka saya buru-buru cari post tentang itu, tapi ternyata di blog saya belum ada . . . Alhasil, saya langsung buat deh . . . . Tanpa menunggu lama, langsung ke tutorialnya saja ya,

Spoiler yang akan kita prektekkan adalah spoiler yang "Fleksibel" artinya "menyesuaikan tempat", Jadi kita tidak perlu mengatur ukuran "Width/lebar" dan "Tinggi/height" secara otomatis menyesuaikan lokasi. Mantep bukan?

Baiklah, berikut contoh Spoiler Fleksibel biasa :

Kodenya seperti ini :

<div class='widget-content'>
<center><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100%;" value="OPEN 1" 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;OPEN 2&#39;; }" type="button" />
</div>
<div style="border:; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 365px; text-align: left;">
<div style="text-align: center;">MASUKKAN TULISAN/KODE/GAMBAR DI SINI</div>
</div></div></div>

Note :

• Warna Ungu adalah tulisan yang muncul sebelum spoiler dibuka. Dengan kata lain "Open 1".  Sobat bisa menggantinya
• Warna  Biru adalah tulisan yang muncul ketika spoiler dibuka. Yaitu "Close'
• Warna Merah adalah tulisan setelah spoiler dibuka,lalu ditutup lagi. Dengan kata lain "Open 2"

Untuk Membuat Spoler Berwarna 

Sebenarnya kode yang dipakai sama persis dengan kode untuk membuat spoiler fleksibel di atas. Hanya ada penambahan kode bacground : kode warna. Contoh yang berwarna seperti ini,

Kodenya adalah sebagai berikut,

<div class='widget-content'>
<center><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100%;background:kode warna;" value="OPEN 1" 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;OPEN 2&#39;; }" type="button" />
</div>
<div style="border:; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 365px; text-align: left;">
<div style="text-align: center;">MASUKKAN TULISAN/KODE/GAMBAR DI SINI</div>
</div></div></div>

Nah, yang berkedip itulah "Kode yang harus Sobat masukkan" jika akan membuat spoiler berwarna