Cara Menggunakan Efek Spoiler Text Di Blog Seperti Pada Steam

Pernah berkunjung ke forum Steam? Jika pernah, mungkin kamu pernah juga menemukan para gamer yang sedang membahas suatu game tertentu secara rinci. Tidak asal membahas game, orang-orang ini juga umumnya akan menerapkan semacan sensor pada chat mereka, jika sesuatu yang mereka bahas saat itu berbau Spoiler bagi orang lain. Sehingga mereka tidak akan menghilangkan kejutan dan keseruan game yang mereka bahas bagi para pembaca lain yang sengaja atau tidak sengaja masuk ke thread diskusi mereka.

Steam menyediakan fitur sensor yang disebut Spoiler Text. Fitur ini akan memblok sebuah kata atau kalimat dengan kotak hitam. Teks akan tertutup dengan kotak hitam solid, dan kita hanya dapat melihat isi kata atau kalimat di dalamnya dengan cara mengarahkan kursor ke teks atau kalimat yang diblok tersebut.

Contohnya seperti ini:

Beware, Spoiler! Titan yang makan ibunya eren, ternyata adalah istri pertama dari ayahnya eren Bwahhahaha.. Sadeeess..


Penting ga penting, tapi fitur seperti lumayan unik dan menarik untuk kita terapkan pada beberapa postingan di blog. Untuk cara menggunakan Spoiler Text pada blog, pertama kita perlu menambahkan code CSS ini pada template blog.

span.bb_spoiler {
color: #000;
background-color: #000;
padding: 0px 8px;
}
span.bb_spoiler:hover {
color: #ffffff;
}
span.bb_spoiler > span {
visibility: hidden;
}
span.bb_spoiler:hover > span {
visibility: visible;
}

Copy, kemudian Paste di atas </b:skin> pada template blog.
Jika sudah selesai, lakukan Save Theme. Dan buatlah sebuah postingan baru untuk mencobanya.

Sekarang, buatlah sebuah kalimat bebas.

Setelah kalimat sudah kamu buat, sekarang masuklah ke mode HTML, dan tambahkan script ini pada kalimat tadi. Nantinya, kamu hanya perlu menerapkan script ini ke setiap kalimat yang ingin kamu sensor dengan efek Spoiler Text.

<span class="bb_spoiler">Akira Asayami, Soul In The Flesh</span>

Walaupun script sudah terpasang, kamu tidak dapat melihat efeknya secara langsung di mode Compose. Sekarang kamu bisa melakukan Preview. Jika terlihat kotak hitam menutupi bagian kalimat, Selamat! Kamu berhasil.

Script tidaklah berlajan sempurna di Preview page. Jadi walaupun terlihat kotak hitam, teks tetap tidak akan keluar walaupun kursor sudah kita arahkan ke sana. Namun dengan munculnya kotak hitam di Preview, sudah menandakan kalau kamu sudah berhasil. Jika kamu mau mengujinya, kamu harus membuka page yang telah kamu buat secara langsung. Artinya kamu harus mem-publish page tersebut, kemudian melakukan view page.

Hasilnya akan seperti ini jika kamu berhasil:

It's me. Akira Asayami, a Soul In The Flesh


author: Akira Asayami