Penggunaan Spoiler pada awalnya dipopulerkan di situs forum seperti kaskus, indowebster, dan forum lainnya untuk menyembunyikan tulisan atau gambar yang terlalu panjang. Namun seiring dengan merambaknya kepopuleran dunia blogging penggunaan Spoiler juga seringkali diterapkan di postingan artikel blog atau website.
Selain itu, pembaca juga dapat menyembunyikan kembali posting tersebut dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space posting, mempercepat loading halaman, menghemat kuota pembaca, dan menyembunyikan isi konten artikel yang kalian buat kedalam suatu box dan jika pengunjung blog kalian menekan tombol spoiler tersebut, maka secara otomatis konten didalam box tersebut akan terbuka.
Selain penjelasan diatas, ada juga yang mendefinisikan, bahwa pengertian Spoiler merupakan sebuah fitur yang terdapat pada suatu website/blog dan difungsikan untuk menyembunyikan barisan text panjang, gambar dengan resolusi besar, video, atau widget serta pembaca dapat melihat konten tersebut dengan melakukan klik sebuah tombol.
Membuat Tombol Spoiler di Postingan Blog
Untuk membuat tombol show hide atau tombol spoiler silahkan kalian gunakan daftar kode dibawah ini dan pasang kode tersebut kedalam artikel blog kalian. Cara pemasangan kode ini kalian harus menyimpannya di bagian mode HTML bukan di Compose
1. Spoiler Simpel Default Blogger
Tombol spoiler pertama ini merupakan tombol spoiler yang sangat sederhana yang pada umumnya banyak sekali digunakan oleh para blogger. Untuk menggunakan spoiler ini silahkan kalian gunakan kode ini :
Maka hasilnya akan tampak seperti dibawah ini :
2. Spoiler Teks Style Blogger
Gaya spoiler kedua ini merupakan spoiler yang tidak menggunakan tombol, namun pada spoiler ini hanya menggunakan teks saja sebagai pengganti tombol. Untuk menggunakan spoiler ini, silahkan kalian copy kode dibawah ini
Maka hasilnya akan tampak seperti dibawah ini :
[Tampilkan Konten]
3.Spoiler Border Color Blogger
Spoiler gaya ketiga ini merupakan spoiler yang sudah dimodifikasi dengan menggunakan border, Untuk menggunakan spoiler yang satu ini silahkan kalian copy kode dibawah ini
Maka hasilnya akan tampak seperti dibawah ini :
4. Spoiler Frame Box Blogger
Tombol spoiler gaya keempat ini merupakan spoiler yang sudah dilengkapi dengan sebuah frame yang terlihat, namun untuk konten tidak akan terlihat sebelum tombol spoiler tersebut di klik. Untuk kalian yang akan menggunakan gaya spoiler ini, silahkan kalian copy code dibawah ini
Maka hasilnya akan tampak seperti di bawah ini :
5. Spoiler Blogger Dengan Judul
Spoiler yang kelima ini adalah spoiler yang sudah dilengkapi dengan teks atau judul di samping tombolnya, jenis spoiler ini juga sudah banyak digunakan di berbagai forum besar seperti kaskus. Untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini
Maka hasilnya akan tampak seperti di bawah ini :
Judulnya:
6. Spoiler Blogger Gambar
Spoiler yang ke enam ini merupakan spoiler yang bisa kalian gunakan untuk menyisipkan teks dan gambar, untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini
Maka hasilnya akan tampak seperti di bawah ini :
Judul Spoiler:
7. Spoiler Blogger Dengan Warna
Spoiler yang selanjutnya adalah spoiler yang sudah menggunakan warna baik pada bagian border maupun pada bagian background frame nya. Untuk kalian yang akan menggunakan spoiler yang satu ini silahkan kalian copy kode dibawah ini
Maka hasilnya akan tampak seperti di bawah ini :
8. Spoiler Keren Blogger dengan CSS
Untuk tampilan spoiler selanjutnya, sudah bisa dikatakan spoiler blogger yang mempunyai tampilan yang sangat menarik, karena pembuatan spoiler ini sudah menggunakan bantuan dari css. Untuk menggunakan spoiler ini silahkan kalian copy kode dibawah ini
Maka hasilnya akan tampak seperti di bawah ini :
Tulis konten yang ingin disembunyikan disini.
9. Spoiler Keren Responsive Blogger
Spoiler selanjutnya adalah spoiler yang menurut saya ini merupakan desain spoiler yang sangat menarik karena sudah menggunakan warna gradient pada tombolnya dan spoiler ini juga sudah di lengkapi dengan fitur responsive. Untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini
Langkah pertama silahkan kalian tempatkan kode tepat diatas kode /body pada menu edit Html. Setelah kode tersebut disimpan diatas kode /body, silahkan kalian tekan tombol simpan tema langkah terakhir silahkan kalian copy kode dibawah ini dan letakkan di postingan kalian
Maka hasilnya akan tampak seperti di bawah ini :
Masukkan Gambar, Teks, Video di sini
10. Spoiler Blogger Responsive CSS
Spoiler kesepuluh hampir sama dengan spoiler pada nomor sembilan, dimana spoiler ini juga dibangun menggunakan bantuan dari CSS dan spoiler ini juga dapat menampilkan hasil yang sangat bagus dan responsive. Untuk kalian yang akan menggunakan spoiler ini silahkan kalian copy kode dibawah ini
Langkah pertama silahkan kalian tempatkan kode tepat diatas kode /body pada menu edit Html. Setelah kode tersebut disimpan diatas kode /body, silahkan kalian tekan tombol simpan tema langkah terakhir silahkan kalian copy kode dibawah ini dan letakkan di postingan kalian
Maka hasilnya akan tampak seperti di bawah ini :
Letakkan konten kalian disini
Kelebihan Spoiler di Blog
- Menghemat space (tinggi, panjang, dan lebar) posting
- Mempercepat loading halaman blog
- Menghemat kuota pembaca.
- Bisa untuk menyembunyikan keyword tertentu untuk optimalisasi posting (tidak dianjurkan)
- Menyembunyikan konten teks, gambar dan lainnya sesuai dengan kebutuhan
Kekurangan Spoiler di Blog
- Bagi pengunjung baru atau pengunjung awam penggunaan spoiler ini akan cukup membuat mereka bingung
- Untuk spoiler ini, saya belum tahu pasti, apakah mesin pencari juga dapat mengindeks isi spoiler atau tidak, namun banyak para mastah yang berargumen jika isi konten dalam spoiler ini juga dapat dirayapi atau di indeks dengan baik oleh mesin pencari
0 komentar:
Posting Komentar