Cara Menciptakan Kotak Spoiler Keren Dengan Css (Tanpa Javascript)
Spoiler box adalah sebuah kotak yang berfungsi untuk menyembunyikan konten dan mampu dimunculkan dikala pengguna melakukan klik pada kotak tersebut. Pada biasanya, spoiler box tampil dengan gaya buka/tutup, sebagian blogger atau pengguna menyebutnya show/hide. Sebagian ada yang memakai Javascript atau jQuery karena lebih gampang. Sebetulnya untuk membuat spoiler box buka tutup di blog mampu memakai CSS.
Kenapa kok pakai versi CSS? karena penggunaan Javascript yang minim di blog itu elok. Penggunaan CSS bisa membuatloading lebih cepat dan sekaligus membuktikan bahwa event onclick sederhana mampu dikerjakan dengan CSS.
1. Spoiler Box dengan CSS
Hal mendasar yang mesti dilaksanakan dalam menciptakan spoiler box (show/hide) pure CSS ini tentu saja menyertakan instruksi CSS terlebih dulu. Coba Anda tambahkan kode berikut DI ATAS ]]> atau .
/* Spoiler Box Pure CSS by MASMALVEN.COM */ .MasMalvenSpoiler display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px; .MasMalvenSpoiler .tombol background:#3498db; /* Warna tombol */ color:#fff; /* Warna goresan pena di tombol */ display:inline-block; cursor:pointer; font:wajar 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px; .MasMalvenSpoiler .tombol:focus pointer-events:none; .MasMalvenSpoiler .tombol:before content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */ display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px; .MasMalvenSpoiler .tombol:focus::before content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */ background:#cc0000; /* Warna tombol ketika spoiler terbuka */ .MasMalvenSpoiler .isi background:#e4e4e4; /* Warna background isi spoiler */ pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease; .MasMalvenSpoiler .tombol:focus + .isi visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease; 2. Spoiler Box dengan HTML
Kode HTML ini berfungsi untuk memanggil kotak Spoiler Box. Anda gunakan aba-aba berikut di dalam postingan setiap mau memanggil spoiler.
Tulis konten yang ingin disembunyikan disini. 3. Demo / Preview
Hasilnya mirip di bawah ini.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
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.