Judul : Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam
Pembahasan : Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam
Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam
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;
}
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:
Akira Asayami, Soul In The Flesh
author: Akira Asayami
Demikianlah Artikel Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam
Sekian dunia kopi coffee Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan kopi coffee kali ini. Selmat menikmati minum kopi
0 Response to "Cara Mudah Pakai Efek Spoiler Text Di Blog Seperti Pada Steam"
Post a Comment