Skript HTML Spoiler (Tombol Buka Tutup) Untuk Blog dengan dan tanpa CSS

Apakah Sahabat Blogger pernah kesal karena panjang dari postingan sobat terlalu panjang sehingga mengganggu penampilan Blog Sobat?
Pada Postingan dialogue-ngeblog kali ini akan membahas Cara membuat Tombol Buka dan Tutup yang berguna untuk menyembunyikan dan menampilkan postingan sobat blogger.

Spoiler box adalah sebuah kotak yang berfungsi menyembunyikan konten dan baru dimunculkan ketika user melakukan klik pada tombol. Umumnya spoiler box tampil dengan gaya buka / tutup, sebagian ada yang menyebutnya show / hide. Kebanyakan dibuat menggunakan Javascript atau jQuery karena lebih mudah. Tapi bisa kok membuat spoiler box buka tutup di blog cuma pake CSS aja. Kok mesti pake versi CSS? Ya karena penggunaan Javascript yang minim di blog itu bagus. Bikin loading lebih cepet. Ini sekaligus menjelaskan bahwa event onclick sedehana bisa dilakukan dengan CSS.

Tombol Spoiler Buka Tutup Tanpa CSS

1. Tombol Spoiler Buka Tutup Simple

Judul Spoiler:

Letakan Konten Sobat Blogger Di Sini..!!

Untuk menggunakkannya Silahkan Sobat Blogger Membuat Postingan, kemudian Pilih tab HTML Copy Code Dibawah ini dan Pastekan seperti gambar di bawah.

<!-- Awal Script Spoiler --> 
<div>
<div style="margin-bottom: 5px;">
<span style="font-size: large; font-weight:bold;">Judul Spoiler:</span>
<input value="Buka" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }"></div>
<div style="margin: 0px; padding: 10px; border: 1px inset;">
<div style="display: none;">

Letakan Konten Sobat Di Sini..!!

</div>
</div>
</div>
<!-- Akhir Script Spoiler -->

1. Ganti Judul Spoiler: sesuai dengan judul yang Anda kehendaki.
2. Letakan konten yang akan dimasukkan di dalam spoiler seperti sebuah paragraf maupun file gambar tepat pada kata Letakan Konten Sobat Di Sini..!!

2. Tombol Spoiler Simple Ke 2

Masukkan konten kalian disini

<div style="text-align: left;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color:  #FFF8DC; border-radius: 2px; border: 3px solid #00008B; color: black; width: 250px;" type="button" value="Tampikan Konten" /></div>
<div style="padding:10px; text-align: justify;">
<div style="display: none;"> 

Masukkan konten kalian disini

</div>
</div>

Tombol Spoiler Dengan CSS

DEMO

Tulis konten yang ingin disembunyikan disini.

Pertama yang harus dilakukan dalam membuat spoiler box (show / hide) pure CSS ini tentu saja menambahkan kode CSS terlebih dulu. Tambahkan kode berikut DI ATAS ]]></b:skin> atau </style>.

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

Kedua Kode HTML, Kode ini berfungsi untuk memanggil kotak spoilernya. Gunakan kode berikut di dalam postingan setiap kali mau menggunakan spoiler.

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

Mudah kan membuat tombol spoiler box di dalam postingan blog diatas. Saya memang lagi seneng banyak-banyakin pake CSS dibanding Javascript. Kalau ada fungsi Javascript yang bisa digantikan oleh CSS kenapa nggak dicoba. Biar lebih ringan aja blognya.

Share this post