Memasang Spoiler Box di Blog Dengan Css
Agustus 27, 2020
Edit
Memasang Spolier Box - Spoiler box adalah kotak yang difungsikan untuk menyembunyikan konten dan akan muncul pada saat di click pada tombol spoilernya, dan bagi beberapa orang menyebutnya menu show/hide.Sudah banyak tutorial membuat spoiler ini namun banyak yang menggunakan javascript.
Dan kali ini kita akan membuat spoiler box dengan menggunakan Css ajah nah pastinya kecepatan blog kalian akan tetap karena kita tidak menggunakan javascript sama sekali dalam tutorial ini.dan sebagai bukti bahwa event onclik juga bisa dilakukan dengan menggunakan CSS
Memasang Spolier Box di Blog
1.Login ke Blogger kalian > Menu > Tema > Edit Html dan kalian tekan
Ctrl+F Dan kalian cari kode berikut ini]]></b:skin> atau </style> dan masukkan kode css yang ada dibawah tepat diatas kode tersebut
/* Spoiler Box Pure CSS by Mashengki */
.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.Setelah kode diatas sudah dipasang di template kalian, maka kalian tinggal menggunakan kode ini untuk menampilkan Spoiler Box diposisi yang kalian inginkan
<div class="ignielSpoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- Isi Spoiler -->
Tulis konten yang ingin disembunyikan disini.
</div>