Cara Membuat Kotak Spoiler Keren dengan CSS


Cara Membuat Kotak Spoiler Keren dengan CSS

HobbyTekno - Spoiler Box adalah sebuah kotak yang digunakan untuk menyembunyikan sebuah konten dan akan muncul ketika di klik pada Tombol. Umumnya Spoiler Box tampil dengan gaya buka tutup, Sebagian ada yang membuatnya Show / Hide. Kebanyakan Spoiler Box ini dibuat menggunakan Javascript atau JQuery karena lebih praktis, tetapi anda juga bisa membuatnya hanya dengan menggunakan CSS agar lebih ringan. Langsung saja berikut caranya

Langkah-Langkah Membuat Kotak Spoiler Keren dengan CSS


1. Untuk Style, salin kode CSS Berikut untuk tampilan Spoiler Box nantinya. Salin kode berikut diatas ]]></b:skin> atau </style>

.hobbyteknoSpoiler {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.hobbyteknoSpoiler .tombol {
    background:#3498db;
    color:#fff;
    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;
}
.hobbyteknoSpoiler .tombol:focus {
    pointer-events:none;
}
.hobbyteknoSpoiler .tombol:before {
    content:'Lihat Spoiler';
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.hobbyteknoSpoiler .tombol:focus::before {
    content:'Tutup Spoiler';
    background:#cc0000;
}
.hobbyteknoSpoiler .isi {
    background:#e4e4e4;
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.hobbyteknoSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}

2. Untuk memanggil atau memunculkan Spoiler Box pada Postingan, kita perlu menyalin kode HTML Berikut kedalam postingan yang ingin kita berikan Spoiler Box.

<div class="hobbyteknoSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Konten Spoiler -->
        Ketik Isi Konten Disini
    </div>
</div>

Simple kan Cara Membuat Tombol Spoiler Box tanpa menggunakan javascript, hanya bermodalkan CSS.

Hasilnya akan jadi seperti berikut.
Ini adalah isi Kotak Spoiler.

Sekian Cara Membuat Kotak Spoiler Keren dengan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Cara Membuat Kotak Spoiler Keren dengan CSS"