Cara Membuat Kotak Spoiler di Blogger Ala Ignil
Artikel yang berisi informasi lengkap akan memiliki nilai plus di mata pembaca. Namun selain memberikan artikel yang padat dan lengkap, fitur untuk membuat pembaca lebih mudah dalam mengakses informasi juga bisa diberikan.
Jadi dalam artikel kali ini saya akan berbagi sebuah tutorial blogger cara memasang kotak spoiler di blog ala mbak ignil.
Berikut ini adalah langkah-langkah yang harus dilakukan.
Cara Membuat Kotak Spoiler di Blog
Pertama, buka dashboard blogger, lalu pilih tema, dan pilih edit HTML.
Selanjutnya, cari kode ]]></b:skin>
Setelah ditemukan, letakan kode di bawah ini tepat di atas kode tersebut.
/* 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;
}
Klik simpan.
Kode yang ditandai adalah kode warna tombol spoiler boxnya. Apabila anda ingin mengubahnya agar sesuai dengan tema warna blog anda, maka tinggal ubah saja kode warnanya.
Untuk mengaplikasikan spoiler di dalam postingan, maka anda harus menggunakan mode HTML. Setelah itu masukan kode HTML di bawah ini.
<div class="ignielSpoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- Isi Spoiler -->
Tulis konten yang ingin disembunyikan disini.
</div>
</div>
Untuk demonya, lihat kotak spoiler di bawah ini atau klik tombol demo.
Spoiler ini sepertinya berfungsi di semua template blogger, karena saya mencoba mengaplikasikannya di template viomagz pun hasilnya bagus.
Nah itulah cara membuat kotak spoiler keren ala mbak ignil di blogger.
Semoga bermanfaat.
Sumber: ignil.com
Posting Komentar