Cara Membuat Kotak Spoiler di Blog, Teks Buka dan Tutup

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, akan tersembunyi lagi jika kotak spoiler di klik ulang, namun tidak selamanya demikian, karena ada juga kotak spoiler yang selalu terbuka, semua tergantung pada setelan kode di kotak spoiler yang diterapkan.

Dan yang akan di bahas di artikel ini adalah kotak teks spoiler yang tersembunyi (show anda hide), dan akan muncul jika judul kotak spoiler di klik dan akan sembunyi lagi jika judul kotak spoiler diklik ulang.

Namun sebelum membahas lebih jauh tentang kotak spoiler, coba lihat dulu contoh kemunculan kotak teks spoiler yang dibawah ini:

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 ?

Jika Anda punya ide untuk menggunakan kotak spoiler seperti diatas maka kebetulan sekali telah berkunjung ke tulisan ini, karena di tulisan ini telah tersedia kode pembuat kotak spoiler yang sudah siap untuk digunakan. Mudah-mudahan cocok dengan template blog Anda.

Namun sebelum Anda mulai mengambil kodenya, cobalah untuk membaca dulu informasi tentang keuntungan dan kerugian menggunakan kotak spoiler di blog , informasi selengkapnya ada di dalam kotak spoiler dibawah ini:

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

Kerugian memasang kotak spoiler pada blog

1. Bagi pengunjung yang tidak tahu fungsi dari kotak teks spoiler akan menganggap bahwa artikel tidak utuh.
2. Bagi pengunjung yang tahu tapi artikel kurang berkualitas juga membuat mereka tidak mau membuka atau mengklik kotak spoiler.

Keuntungan memasang kotak spoiler di blog

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

Ada dua jenis tampilan kotak teks spoiler diatas dan yang akan dibagikan ditulisan ini adalah jenis kotak spoiler yang pertama, sementara jenis yang kedua akan dibagi sesuai permintaan dan ketertarikan Anda,

Untuk mendapatkan kode kotak spoiler, silahkan copy kode dibawah ini:

<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>

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

Kesimpulan: Kotak spoiler akan cocok digunakan bagi blog dan website yang membuat tulisan atau konten dalam satu halaman yang sangat banyak dan panjang, karena dengan memasang kotak spoiler di halaman tersebut setidaknya akan meringankan loading halaman ketika ada yang membukanya.

Posted by Sakri

Jika artikel ini cukup bermanfaat silahkan bagikan artikel ini ke:

Facebook Twitter Google+