Cara Membuat Kotak Spoiler CSS Responsive

Nyampling << N >> Cara Membuat Kotak Spoiler CSS Tanpa Javascript Yang Responsive. Jika anda sering melihat sebuah kotak ataupun tabel yang sering di sembunyikan dan akan muncul ketika diklik maka kotak tersebut disebut sebagai "Spoiler Box". Spoiler ini box ini umumnya menggunakan kode javascript ataupun jQuery dengan gaya tampilkan/sembunyikan. Dengan banyaknya kode javascript yang disematkan di blog maka besar kemungkinan akan memperlambat speed loading blog.

Sehingga menggunakan javascript atau jQuery sebernarnya tidak disarankan. Nah, supaya loading blog tidak berat maka kali ini nyampling akan memberikan tutorial Cara Membuat Kotak Spoiler CSS Responsive sehingga tidak akan berpengaruh pada kecepatan loading blog anda.

Simak tutorial Cara Membuat Kotak Spoiler CSS Tanpa Javascript Yang Responsive berikut ya.

Langkah 1. 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;
}

Langkah 2. Pada halaman edit postingan blog 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>

Langkah 3. Hasil akhirnya bakal kaya gini.