Cara membuat spoiler show hide gambar dengan latar background

Spoiler show hide biasa digunakan seorang blogger untuk meringkas tampilan halaman blognya dengan cara menyembunyikan teks atau gambar pada suatu artikel yang mereka buat dan disamping akan terlihat lebih keren tentunya akan membuat pengunjung lebih tertarik untuk mengunjungi blog sobat.

Setelah searching di mbah google akhirnya saya temukan bagaimana cara membuat spoiler show hide yang baru yang tentunya berbeda dong dari yang sebelumnya. Kenapa saya katakan berbeda, karena pada spoiler show hide ini memiliki latar background warna dan mungkin juga bisa dengan latar background gambar akan tetapi ane belum coba otak atik scriptnya nih jadi tunggu aja postingan selanjutnya ya .

Sobat udah tahukan maksud saya di atas? kalo sobat belum tahu sebaiknya langsung sobat praktekin aja deh biar lebih mudah oke.

Silahkan sobat copy script di bawah ini.

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = Hide; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = Show; }" name="button" type="button" value="Spoiler Dengan background Warna dan Border" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">Apa Aja Boleh<br /> </p></div><div id="hide"></div></div></div>

Catatan:

• Tulisan yang berwarna biru dapat sobat ganti dengan warna kesukaan sobat. Tinggal sobat ganti dengan code warna html kesukaan sobat. Untuk mengetahui code warna html klik di sini.
• Tulisan yang berwarna merah dapat sobat ganti dengan tulisan yang sobat inginkan.
• Tulisan yang berwarna ungu dapat sobat ganti denga angka yang sesuai dengan ketebalan border yang sobat inginkan.

maka tampilannya akan nampak seperti di bawah ini.

Apa Aja Boleh