Skip to main content

Membuat Spoiler Dengan CSS (Tanpa JavaScript)

Membuat Spoiler Hanya dengan CSS (Tanpa Javascript) - Pada waktu yang lalu Saya sudah membuat postingan Membuat Spoiler Untuk Blog AMP HTML Kali ini saya akan coba membuat postingan dengan judul Membuat Spoiler Dengan CSS (Tanpa JavaScript). Sehingga bisa dipasang pada blog AMP maupun Non AMP.

Sebenarnya Artikel ini Saya dapatkan dari blognya mba Igniel Namun saya tertarik untuk mencoba membagikan disini. Untuk demonya seperti pada gambar diatas.

Jika Anda ingin mencobanya pada blog Anda, mari ikuti langkahnya berikut ini.

Silahkan Anda Simpan CSS pada dibawah ini diatas kode ]]></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;
}

Setelah itu, untuk membuat spoiler dipostingan kita harus menuliskan html seperi berikut ini.


<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
        <div class="isi">
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div>

Selesai. Cukup mudah bukan.

Kekurangan:

Adapun kekurangan dari spoiler diatas, yaitu isi dari spoiler tidak bisa di coppy, karena tombol tutup bisa diklik dimana saja, sehingga saat mau coppy dari isi spoiler tersebut, isi spoiler akan menutup.

You Might Also Like:

Buka Komentar