Cara Membuat Kotak Spoiler Dengan CSS Lebih Mudah

Pada kesempatan kali ini saya ingin berbagi tutorial Cara Membuat Kotak Spoiler dengan CSS. Cara nya cukup gampang dan tidak membutuhkan waktu yang lama untuk kalian baca artikel ini dan mempraktekan nya langsung. Tutorial ini saya dapat kan dari sobat saya yaitu Mba Igniel dengan blog nya yang yang bernama www.igniel.com

Sebelum kita lanjut tutorial nya,, saya akan jelaskan apa itu spoiler kali saja sobat ada yang belum tau apa itu spoiler. Spoiler adalah sebuah kotak yang berfungsi untuk menyembunyikan dan membuka konten atau isi yang kita taro di dalam nya.

Biasa nya spoiler box tampil dengan gaya buka/tutup, sebagian banyak yang menyebutnya show/hide. Kebanyakan di buat melalui javascript atau Jquery karena mungkin lebih mudah. Tapi untuk spoiler kali ini yang akan saya bagikan yaitu cukup menggunakan CSS saja, karena bagi saya cukup mudah juga dan kalian bisa merubah bentuk atau warna yang ada di CSS sesuka kalian.

Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript)

Silakan kalian copy code di bawah ini dan letakan di atas code </style> Atau di ]]></b:skin>. Silakan kalian cocokan dimana sekiranya yang work di template kalian masing", karena setiap template berbeda-beda sob.

/* 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;
}

Lalu untuk code pemanggil nya silakan kalian gunakan code di bawah ini. Dan letakan di setiap kali kalian ingin gunakan di dalam postingan.

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

Selesai. Dan silakan lihat hasil nya.

Gimana menurut kalian,, mudah bukan dan pasti nya keren dong. Yaa mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. Semoga bermanfaat buat sobat yang sedang mencari Cara Membuat Kotak Spoiler Di Blog Tanpa JavaScript. Selamat mencoba!

Lihat Sumber

Share this post