
Spoiler box adalah sebuah kotak yang berfungsi menyembunyikan konten dan baru dimunculkan ketika user melakukan klik pada tombol. Umumnya spoiler box tampil dengan gaya buka / tutup, sebagian ada yang menyebutnya show / hide. Kebanyakan dibuat menggunakan Javascript atau jQuery karena lebih mudah. Tapi bisa kok membuat spoiler box buka tutup di blog cuma pake CSS aja. Kok mesti pake versi CSS? Ya karena penggunaan Javascript yang minim di blog itu bagus. Bikin loading lebih cepet. Ini sekaligus menjelaskan bahwa event onclick sedehana bisa dilakukan dengan CSS.
1. CSS
Hal utama yang harus dilakukan dalam membuat spoiler box (show / hide) pure CSS ini tentu saja menambahkan kode CSS terlebih dulu. Tambahkan kode berikut DI ATAS ]]></b:skin>
atau </style>
.
/* Spoiler Box Pure CSS by IGNIEL.COM */
.ignielSpoiler {
display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol {
background:#3498db; /* Warna tombol */
color:#fff; /* Warna tulisan di tombol */
display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus {
pointer-events:none;
}
.ignielSpoiler .tombol:before {
content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus::before {
content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.ignielSpoiler .isi {
background:#e4e4e4; /* Warna background isi spoiler */
pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.ignielSpoiler .tombol:focus + .isi {
visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}
2. HTML
Kode HTML ini berfungsi untuk memanggil kotak spoilernya. Gunakan kode berikut di dalam postingan setiap kali mau menggunakan spoiler.
<div class="ignielSpoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- Isi Spoiler -->
Tulis konten yang ingin disembunyikan disini.
</div>
</div>
3. Demo / Preview
Hasil akhirnya bakal kaya gini.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Simple kan membuat tombol spoiler box di dalam postingan blog diatas. Saya memang lagi seneng banyak-banyakin pake CSS dibanding Javascript. Kalau ada fungsi Javascript yang bisa digantikan oleh CSS kenapa nggak dicoba. Biar lebih ringan aja blognya.
wah makasih banyak kak, kemaren aku sempat urungkan niat pakai yang kaya gini (modal) karena css framework nya ga cocok sama program web saya
BalasHapuskeren mba, tapi kalau misalnya mau copy isi dari sepoiler diatas itu susah. soalnya klik tutup spoilernya bisa diluar tombol. jadi pas mau di copy, isi spoiler akan ketutup duluan.
BalasHapusIya mas itu salah satu kekurangannya. Masih menutup kalo diklik dimana aja.
HapusMenggunakan kode diatas bisa merapikan artikel dengan niche tutorial. makasih mbak n salam kenal
BalasHapusBisa untuk buka tutup Komentar Disqus juga kah mbk Igniel...
BalasHapusKalo pake ini cuma disembunyiin aja mas.
HapusMending pake yang ini, yang pemanggilannya ditunda sebelum klik tombol. Biar blognya ringan https://www.igniel.com/2018/03/load-disqus-onclick-button.html
Menggunakan spoiler ini, konten tetap bisa terdeteksi atau terindeks google tdk g ya mbak igniel?
BalasHapusMasih terindex oleh mesin pencari kok.
HapusMbak igniel, kalau buat kotak spoiler buka tutupnya di kasih pasword caranya gimana ya?
BalasHapusBisa-bisa aja. Tapi harus pake javascript. Nggak bisa sekedar CSS kaya yang ini.
Hapuscaranya gmn ya mbak kalau pake javascript kasih kode pasword
HapusSeeeep!
BalasHapusBtw, request cara membuat daftar isi di dalem artikel donk...
biar kalo buat artikel panjang visitor ngga perlu ribet scroll up/down
As you wish, buddy. Enjoy.
Hapushttps://www.igniel.com/2018/08/daftar-isi-table-of-contents.html
Link nya gak bisa di klik mbak'e ,
HapusKetik manual aja di browser.
Hapusbuatin untuk yang banyak spoiler kak, thanks
BalasHapusThanks banget mbak..
BalasHapusIni yang saya cari.. dan thanks juga artikel ini menyelesaikan masalah saya..
Mbak kalau menu spoilernya kanyak di web-web google dan wikipedia (dropdown) itu digimanainya mbak?
BalasHapuskalo mau di buat 2 gimana biar beda2 nama nya
BalasHapusKalo Mau Di Buat 2 BAr Gimana
BalasHapuskak izin tulis ulang ya :)
BalasHapusBerhasil gan, minta tolong bikinin lagi tutor spoiler begini, cuma bedanya "lihat spoiler" adalah judulnya. Dan ketika kita menekan judul yg kedua, judul yg pertama otomatis tertutup. Plis balas ya agan cakep.
BalasHapusAne nunggu kyk gini jg. Klo amp ad tu yang acordion. Tp ntah bs g dengan blog non amp
HapusOh ternyata namanya mbk igniel ππbalas ya mbak cakeeep
BalasHapusKalo tombol buka tutupnya diganti icon bisa gak teh πππ
BalasHapusMbak igniel... Kalo rada di lebarin dikit gimana yah??
BalasHapusContohnya... Buka spoiler
Dan isi spoilernya terbuka satu pragraff.. walaupun belum klik buka spoiler... Kaya semacam readmore..
Makasih kak ππ
terima kasih mbak, nyari yng ke ginian nemunya disini
BalasHapusMba, request tutorial bikin "Tab" pada postingan dong.
BalasHapusSeperti pada postingan dokumentasi Fiksioner itu kan ada tab "Indonesian" dan English". :D
keren themenya
BalasHapus