Membuat Sendiri Spoiler Untuk Blog


Bila kita membuka sebuah forum, terkadang kita menemui yang namanya “spoiler” yang bisa digunakan untuk menyembunyikan sebuah konten bila dirasa ukurannya terlalu besar, misalnya berupa cerita atau gambar. Spoiler juga sangat berguna bila kita memiliki sebuah blog yang menceritakan atau me-review sebuah film. Bila dirasa paragraf yang kita tuliskan mengandung spoiler bisa kita sembunyikan tetapi tetap masih bisa ditampilkan oleh pembaca yang penasaran dengan isinya. Berikut adalah cara membuat sendiri kolom spoiler untuk blog maupun website menggunakan CSS dan Javascript tanpa menggunakan Bootstrap, jQuery maupun framework lain yang bisa membebani kecepatan muat website.

Sebelumnya kita tentukan dulu bagaimana tampilan kolom spoiler kita, misalnya kolom spoiler akan memiliki tombol untuk menunjukkan dan menyembunyikan spoiler dan isi dari spoiler akan ditampilkan di dalam sebuah kotak seperti contoh di bawah ini :


Isi spoiler dituliskan di sini

Klik tombol di atas untuk menampilkan atau menyembunyikan spoiler


Sekarang kita bahas elemen spoiler di atas satu per satu

Tombol

Tombol spoiler sebenarnya terdiri dari dua buah tombol yaitu tombol Show spoiler dan tombol Hide spoiler yang akan dimunculkan bergantian bila tombol tersebut di klik. Untuk membuatnya kita akan menggunakan elemen CSS display yang akan dimanipulasi menggunakan Javascript.

Kita buat dua buah tombol yang masing-masing kita beri ID yang berbeda sebagai idenfitikasi pada script CSS nanti.

<button id=”sSpoiler” onClick = “”>Show spoiler</button>
<button id=”hSpoiler” onClick = “”>Hide spoiler</button>

Untuk sementara isi dari onClick kita kosongkan dulu, dimana nantinya akan diisi dengan function untuk memanipulasi CSS.

Kontak Container Spoiler

Kotak yang akan menampilkan spoiler sebenarnya adalah sebuah blockquote, blockquote ini bisa kita format sesuka kita untuk tampilannya menggunakan CSS, akan tetapi yang paling penting adalah bahwa kita hanya akan menyempunyikan konten di dalam blockquote sementara blockquote akan selalu terlihat untuk menunjukkan bahwa ada konten berupa spoiler pada bagian tersebut, untuk itu kita memerlukan elemen berupa <div> di dalam blockquote sehingga struktur blockquote untuk spoiler akan terlihat seperti di bawah ini.

<blockquote>
<div id=”isiSpoiler”>
Isi spoiler ditulis di sini.
</div>
</blockquote>

Kode CSS

Untuk kode CSS kita hanya memerluka kode untuk menampilkan dan menghilangkan sebuah objek pada layar, kita hanya perlu menampilkan tombol Show Spoiler sementar tombol Hide Spoiler dan isi dari blockquote kita sembunyikan menggunakan :

#sSpoiler {display: block;}
#hSpoiler {display: none;}
#isiSpoiler {display: none;}

Untuk kode CSS tampilan blockquote bisa kita modifikasi sesuai selera kita.
Bila kode CSS dituliskan di dalam html gunakan tag style

Javascript function

Untuk javascriptnya kita akan membuat dua buah fungsi untuk menunjukkan spoiler dan menyembunyikan spoiler dimana ketika spoiler muncul, tombol akan berubah dari Show Spoiler menjadi Hide Spoiler dan sebaliknya.

function showSpoiler() {
document.getElementById(“isiSpoiler”).style.display = “block”;
document.getElementById(“sSpoiler”).style.display = “none”;
document.getElementById(“hSpoiler”).style.display = “block”;
}
function hideSpoiler() {
document.getElementById(“isiSpoiler”).style.display = “none”;
document.getElementById(“sSpoiler”).style.display = “block”;
document.getElementById(“hSpoiler”).style.display = “none”;
}

Dengan script di atas kita telah membuat dua buah fungsi untuk memanipulasi CSS display ketiga elemen ID dengan nama showSpoiler() dan hideSpoiler(). Kedua fungsi ini kita masukkan ke dalam script button untuk dieksekusi ketika tombol ditekan. sehingga script untuk tombol di atas menjadi :

<button id=”sSpoiler” onClick = “showSpoiler()”>Show spoiler</button>
<button id=”hSpoiler” onClick = “hideSpoiler()”>Hide spoiler</button>

Script untuk spoiler seharusnya berjalan dengan baik seperti contoh di atas. Dengan metode yang sama kita juga bisa membuat spoiler dengan format tampilan yang berbeda.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Jun 16, 2016


www.000webhost.com