Mengedit Tampilan Spoiler Agar Berwarna

Mengedit tampilan spoiler agar berwarna, frame teks digunakan untuk menghemat bagian post supaya lebih ringkas, frame teks yang biasa digunakan seperti: Scroll-Bar, Teks Area, dan Spoiler, spoiler sebelumnya pernah dibahas dalam bentuk standar.

Tampilan standar spoiler mungkin sudah banyak yang memakai, bagaimana supaya tampilan spoiler berbeda dengan kebanyakan orang pakai? tampilan spoiler standar seperti contoh dibawah ini :

Silahkan klik tombol show :



Dengan menggunakan spoiler dapat meringkas bagian post menjadi pendek dengan cara menyembunyikan bagian post tersebut

Semoga dengan cara menampilkan spoiler didalam post bisa menjadikan tampilan post lebih menarik

supaya agak berbeda kita bisa tambahkan background warna dibelakangnya seperti ini :

Silahkan klik tombol show :


Dengan menggunakan spoiler dapat meringkas bagian post menjadi pendek dengan cara menyembunyikan bagian post tersebut
Semoga dengan cara menampilkan spoiler didalam post bisa menjadikan tampilan post lebih menarik

Kode untuk membuatnya adalah seperti 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;">Dengan menggunakan spoiler dapat meringkas bagian post menjadi pendek dengan cara menyembunyikan bagian post tersebut
Semoga dengan cara menampilkan spoiler didalam post bisa menjadikan tampilan post lebih menarik<br /> </p></div><div id="hide"></div></div></div>
Keterangan :
  • <div style=”color: #000000;= Ini untuk mengganti warna teks
  • background: #EBF3FB; = Ini untuk mengganti warna background
  • border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border

Semoga bermanfaat,

Post a Comment

Lebih baru Lebih lama