Membuat Spoiler di Blogspot

Spoiler adalah sebutan untuk sebuah tombol yang digunakan untuk menyederhanakan sebuah konten, pada penggunaan umum biasanya sebuah text kalimat, gambar atau bahkan iframe bisa di selipkan atau disembunyikan dengan spoiler dan hanya akan terlihat apabila kita klik tombol spoiler tersebut. Kelebihan menggunakan spoiler pada sebuah konten halaman website yaitu untuk merapikan penampilan isi sebuah konten dan juga untuk mempercepat waktu yang diperlukan untuk memuat sebuah halaman, namun sebaliknya ada pula kekurangan menggunakan spoiler dapat membuat pengunjung mengira bahwa postingan kita tidak memiliki konten yang sesuai karena mereka tidak langsung melihat konten yang sebetulnya tersembunyi di dalam spoiler. Tapi kekurangan yang baru saja disebutkan itu pastinya dapat diselesaikan apabila tampilan halaman website kita memiliki unsur informatif dan edukatif, jadi pengunjung tidak hanya bisa memahami isi konten tapi mereka juga bisa dengan mudah mengenali karakteristik sebuah halaman website.

Contoh spoiler yang belum terbuka.

Contoh spoiler yang sudah dibuka.

Berikut adalah kode spoiler yang bisa langsung di gunakan, copy kode spoiler yang bercetak miring dibawah ini dan paste pada halaman HTML pada saat membuat atau edit sebuah postingan. Ingat pada halaman edit posting jangan lupa pilih mode HTML jangan compose.

<div id="spoiler1" style="display: none;">

ISI KONTEN

</div>

<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="TEXT YANG MUNCUL PADA SAAT CURSOR MOUSE BERADA DI ATAS TOMBOL SPOILER" type="button">JUDUL TOMBOL SPOILER</button>

Keterangan tambahan :

1. ISI KONTEN adalah tempat untuk meletakan text kalimat, gambar, atau sebuah iframe.
2. Angka 1 pada tulisan spoiler berfungsi untuk membedakan setiap spoiler pada sebuah halaman website. Contoh kita ingin menggunakan lebih dari 1 spoiler maka saat kita membuat spoiler kedua harus menggunakan div id yang berbeda tentu langkah mudah yaitu dengan menambahkan sebuah angka.
3. TEXT YANG MUNCUL PADA SAAT CURSOR MOUSE BERADA DI ATAS TOMBOL SPOILER adalah kalimat yang bisa kita ganti sesuka hati untuk mendeskripsikan sebuah tombol apabila cursor mouse berada di atas tombol.
4. JUDUL TOMBOL SPOILER adalah tulisan yang berada di sebuah tombol dan bisa juga terlihat seperti nama atau judul tombol spoiler.

Berikut contoh kode spoiler untuk spoiler kedua

<div id="spoiler2" style="display: none;">

ISI KONTEN

</div>

<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="TEXT YANG MUNCUL PADA SAAT CURSOR MOUSE BERADA DI ATAS TOMBOL SPOILER" type="button">JUDUL TOMBOL SPOILER</button>

Sekian artikel tentang Membuat Spoiler di Blogspot, semoga artikel ini bermanfaat bagi kita pemilik website yang ingin membuat halaman website menjadi lebih rapi dan menarik.
Terima kasih sudah berkunjung dan membaca artikel ini.