Cara Membuat Kotak Spoiler Dengan CSS

Diposting pada

Cara Membuat Kotak Spoiler Dengan CSS
Cara Membuat Kotak Spoiler Dengan CSS – Sudah berapa hari ini saya lagi tidak fokus untuk update artikel di karenakan sibuk nya berbagai kegiatan di tempat saya. Dan untuk untuk hari ini mencoba untuk update artikel yang se’simple mungkin biar tidak terlalu lama” berada di layar hp. Dan untuk artikel kali ini saya mau berbagi kepada sobat 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 bernama 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 kotak 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.

Baca Juga : Cara membuat kotak catatan dengan tombol close di blog

Cara Membuat Kotak Spoiler Dengan CSS

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

2. 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>

3. Selesai.

DEMO

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Kotak Spoiler Dengan CSS. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *