Cara Memakai Efek Spoiler Text Di Blog Ibarat Pada Steam

Pernah berkunjung ke lembaga Steam? Jika pernah, mungkin kau 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, bila sesuatu yang mereka bahas dikala 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 sanggup melihat isi kata atau kalimat di dalamnya dengan cara mengarahkan kursor ke teks atau kalimat yang diblok tersebut.

Contohnya menyerupai ini:

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


Penting ga penting, tapi fitur menyerupai tidak mengecewakan unik dan menarik untuk kita terapkan pada beberapa postingan di blog. Untuk cara memakai 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, lalu Paste di atas </b:skin> pada template blog.
Jika sudah selesai, lakukan Save Theme. Dan buatlah sebuah postingan gres untuk mencobanya.

Sekarang, buatlah sebuah kalimat bebas.

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

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

Walaupun script sudah terpasang, kau tidak sanggup melihat efeknya secara eksklusif di mode Compose. Sekarang kau sanggup melaksanakan Preview. Jika terlihat kotak hitam menutupi bab kalimat, Selamat! Kamu berhasil.
Script tidaklah berlajan tepat di Preview page. Makara walaupun terlihat kotak hitam, teks tetap tidak akan keluar walaupun kursor sudah kita arahkan ke sana. Namun dengan munculnya kotak hitam di Preview, sudah membuktikan kalau kau sudah berhasil. Jika kau mau mengujinya, kau harus membuka page yang telah kau buat secara langsung. Artinya kau harus mem-publish page tersebut, lalu melaksanakan view page.

Hasilnya akan menyerupai ini bila kau berhasil:

Akira Asayami, Soul In The Flesh


author: Akira Asayami

Bagikan Artikel ini