Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Kotak Spoiler Keren Dengan Css (Tanpa Javascript)

 adalah sebuah kotak yang berfungsi untuk menyembunyikan konten dan bisa dimunculkan ketik Cara Membuat 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.


Cukup simple kan membuat kotak spoiler box di dalam artikel blog diatas tadi. Semoga memiliki kegunaan dan terima atas kunjungan Anda.