Cara Membuat Kotak Spoiler di Blog, Teks Buka dan Tutup

Cara Membuat Kotak Spoiler di Blog, Teks muncul dan sembunyi

Apa itu kotak spoiler ?

Kotak spoiler adalah kotak teks yang dapat menyimpan tulisan dan gambar secara sembunyi dan akan muncul jika judul spoiler di klik, demikian sebaliknya tersembunyi lagi jika di klik ulang, namun tidak selamanya demikian ada juga kotak spoiler yang selalu terbuka semua tergantung pada setelan kode kotak spoiler yang diterapkan.

Di artikel ini yang akan di bahas adalah kotak teks spoiler yang tersembunyi dan akan muncul jika judul kotak spoiler di klik dan akan sembunyi lagi jika judul kotak spoiler diklik ulang.

Lihat contoh kemunculan kotak teks spoiler dibawah:

Tulis teks dan gambar yang akan disembunyikan disini.

Bagaimana penampakan kotak teks spoiler menurut Anda dan ide apa yang terpikir untuk menggunakan kotak teks spoiler diatas ?

Tentu Anda juga pernah melihat tampilan kotak teks spoiler seperti dibawah ini ?

Kotak teks spoiler seperti ini sering digunakan untuk menyembunyikan atau buka dan tutup tulisan pada sub judul.

Sebelum lebih lanjut bagaimana cara membuat kotak teks poiler diatas terlebih dulu mari belajar bersama tentang keuntungan dan kerugian menggunakan kotak teks spoiler pada blog.

1. Bagi pengunjung yang tidak tau fungsi dari kotak teks spoiler akan menganggap bahwa artikel tidak utuh.
2. Bagi pengunjung yang tau tapi artikel kurang berkualitas juga membuat mereka enggan untuk mengklik.

1. Hemat kuota dan hemat halaman blog.
2. Blog atau website terkesan profesional

Ada dua jenis kotak teks spoiler diatas dan saya akan membagi cara membuat kotak teks spoiler jenis yang pertama, sementara jenis yang kedua kalau ada permintaan saja saya akan bagi pada Anda. untuk selanjutnya silahkan Pemirsa copy kode dibawah ini:

<-- Stars code dari: http://carasakrayblog.blogspot.com --><div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; }" style="font-size: 16px; margin: 0px; padding: 2px; width: auto;" type="button" value="Muncul | Sembunyi" /> </div><div class="alt2" style="background-color: whitesmoke; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 1px inset; color: #666666; line-height: 1.5em; margin: 0px; padding: 6px;"><div style="display: none;">Simpan tulisan dan kode gambar yang akan disembunyikan atau di munculkan disini.</div></div></div> <-- End code dari: http://carasakrayblog.blogspot.com -->

Teks yang berwarna merah isi dengan judul dan teks yang berwarna biru isi dengan pesan teks atau dengan script gambar. Dan jika ingin merubah tampilan kotak spoiler rubahlah pada bagian warna background, color, width, height, font-size, border dan lainnya.

ADS HERE !!!