Cara Membuat Kotak Spoiler Keren di Blogger Dengan CSS
Spoiler 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.
Bagi kamu yang sering posting artikel yang menyajikan kode-kode seperti HTML, Javascript, dll. Saya yakin kamu sering menggunakan Kotak-kotak spoiler untuk menampilkannya agar terlihat lebih elegan dan menarik. Memang benar jika kamu menggunakan kotak seperti itu membuat artikel kamu menjadi lebih elegan. Biasanya kotak spoiler ini digunakan untuk blog yang mempunyai niche Anime / film yang berspoiler.
Cara Membuat Kotak Spoiler Keren di Blogger Dengan CSS
1. Silahkan kamu masuk ke blogger.com dan Login dengan mengggunakan Gmail kamu.
2. Masuk ke menu TEMA > Edit HTML.
3. Silahkan cari kode ]]></b:skin> dan pasang kode CSS berikut ini tepat diatas kode tersebut.
/* Spoiler Box Pure CSS */.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;}4. Kalau sudah silahkan SIMPAN dan Selesai.
5. Silahkan tambah kode HTML dibawah ini sesuai dengan keinginan kamu sendiri. 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>Nah, Gimana mudah bukan Cara Membuat Kotak Spoiler Keren di Blogger Dengan CSS, apabila ada kesalahan / error silahkan koment di kolom komentar dibawah artikel berikut ini.