20230802 085546

Tutorial Membuat Kotak Spoiler Atau Kotak Teks Tersembunyi Pada Blogspot

Diposting pada

Codepelajar – Tutorial Membuat Kotak Spoiler Atau Kotak Teks Tersembunyi Pada Blogspot merupakan sebuah cara unik untuk mempercantik blog anda, dimana pengunjung harus menekan tombol yang disediakan untuk membuka teks tersembunyi.

Apa itu Spoiler Box?

Spoiler Box adalah kotak kecil yang mengandung teks atau gambar yang disembunyikan secara default. Pengguna harus mengklik atau menggulir untuk membuka kotak dan mengungkap kontennya. Spoiler box sering digunakan untuk menyembunyikan potongan-potongan cerita, jawaban pertanyaan, atau gambar-gambar penting dalam postingan agar tidak langsung terlihat oleh pembaca.

Bagaimana cara membuat Spoiler Box?

Ingat bahwa ini hanya untuk blogger, mungkin bisa saja di gunakan untuk wordpress namun saya belum pernah mencobanya.

1. Buka Blogspot dan masuk ke menu edit tema

20230802 091053

2. Salin kode CSS di bawah ini dan tempatkan di atas kode ]]></b:skin> atau </style>:

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

Perhatikan gambar yang sudah saya berikan:

20230802 091122

3. Jika sudah silahkan simpan dan lanjut ke tahap kedua dimana kotak box harus dibuat, anda hanya perlu membuat postingan baru dan tempatkan kode di bawah ini di dalam mode HTML:

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

Jika sudah maka gambarnya akan seperti ini:

20230802 091144

4. Ubah kata “Tulis konten yang ingin disembunyikan disini.” dengan text anda atau link.

Itulah cara mudah membuat box spoiler yang cocok untuk menyembunyikan teks ataupun link dan mungkin saja jika anda ingin menyembunyikan gambar maka sembunyikan di kotak box tersebut.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *