Cara membuat kotak Spoiler ( blogger)
Kegunaan kotak Spoiler box , kalian dapat membuat isi kutipan kata atau deskripsi yang di sembunyikan dalam bentuk box.
Dengan demikian maka blog atau website kalian bisa terlihat profesional dan keren. Langkah pertama kalian harus login pada dasbor blogger atau blogspot .
Sebelum membuat kotak Spoiler box , seperti apa Spoiler box tersebut , kalian bisa lihat Demonya di bawah ini
Cara membuat kotak Spoiler box!
Login Dashboard blogger >tema>edit html.
Cari kode Css ]]><b:skin> , lalu letakkan kode Css di bawah ini tepat di atas kode Css ]]><b:skin> .
• Kode CSS
/* 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;
}
Langkah selanjutnya , Copy kode html/JavaScript di bawah.
• Kode html/JavaScript
<div class="ignielSpoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- isi Spoiler kata deskripsi -->
</div>
</div>
letakkan pada bagian postingan artikel secara manual .
Dengan mode html bukan mode teks setelah itu klik simpan , lihat hasilnya.
Sebelum menyimpan kode html/JavaScript kalian bisa menambahkan ,isi Spoiler .
Ubah kode html
<-----isi Spoiler kata deskripsi---->
Ganti dengan teks sesuai isi pada Spoiler box.
Setelah itu jangan lupa untuk simpan dan sudah selesai.
Terimakasih banyak atas kunjungannya di situs web kami , semoga tutorial ini bisa menjadi manfaat , jangan lupa untuk mengunjungi kembali ke situs web ini , kami akan selalu memposting artikel terbaru.
