Cara Buat Kotak Spoiler Keren

Pada dasarnya Spoiler box ialah kotak yang mempunyai fungsi menyembunyikan konten dan akan muncul ketika pembaca mengklik tonbol yang telah disediakan. Banyak sekali jenis dari Spoiler box yang tersebar di internet, tapi kali ini saya akan memberikan tutorial Cara Buat Kotak Spoiler Keren pure CSS. Yang pastinya tidak akan memengaruhi kecepatan blog sobat sekalian.

Sebagian orang juga berpendapat bahwa fungsi dari kotak Spoiler ialah untuk menyembunyikan teks panjang baik itu berisi gambar, video atau widget. Nah jika sobat tertarik untuk menggunakan kotak Spoiler ini pada blog sobat, bisa simak tutorial dibawah ini dengan seksama ya sob.

Tutorial Cara Buat Kotak Spoiler Keren

1. Silahkan buka blogger sobat lalu pilih template dan edit HTML.

2. Cari code ></b:skin> atau </style> dengan cara Ctrl + F Lalu Letakkan kode dibawah ini tepat diatasnya

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

3. Letakkan kode HTML berikut untuk memanggil di tempat yang sobat inginkan, bisa di widget atau postingan.

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

4. Untuk melihat hasilnya, sobat bisa lihat dibawah ini.

Nah sobat itulah tutorial Cara Buat Kotak Spoiler Keren Pada dasarnya banyak sekali di internet tutorial cara buat Kotak Spoiler ini, sobat juga bisa melihat tutorial Cara Pasang Halaman Error 404 di Blogger pada blog ini, Terima kasih kepada sobat yang telah membaca artikel ini. Mohon bantuannya untuk share sekaligus coment pada artikel ini. Terima kasih dan sampai jumpa diartikel selanjutnya.

Sumber : https://www.igniel.com/2018/02/spoiler-box-css.html