Cara Membuat Kotak Spoiler Ala Kaskus di Blogger

Cara Membuat Kotak Spoiler Ala Kaskus di Blogger - Kotak spoiler yang memiliki fungsi untuk menyimpan beberapa kata unik atau kode unik. Yang biasanya kotak Spoiler ini sering digunakan pada website forum diskusi seperti Kaskus.

Nah, di artikel ini Chilogger akan memberikan tutorial cara membuat nya, yang di tulis dalam satu artikel berjudul Cara Membuat Kotak Spoiler Ala Kaskus di Blogger.

Cara Membuat Spoiler Box di Blogger.

1. Login ke akun Blogger kamu masing-masing.

2. Klik menu Tema => Edit Html.

3. Masukan kode script CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Spoiler Box Pure CSS */
.jagoanSpoiler {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.jagoanSpoiler .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;
}
.jagoanSpoiler .tombol:focus {
    pointer-events:none;
}
.jagoanSpoiler .tombol:before {
    content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.jagoanSpoiler .tombol:focus::before {
    content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
    background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.jagoanSpoiler .isi {
    background:#e4e4e4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.jagoanSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}

4. Simpan Tema.

Untuk cara menggunakan nya, silahkan pastekan markup kode script pemanggil di bawah ini.

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

5. Selesai.

Sekian artikel Cara Membuat Kotak Spoiler Ala Kaskus di Blogger. Semoga bermanfaat.