ARDI KUSNADI

Sabtu, 23 Mei 2020

Membuat spoiler pada blog

6 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
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 :
Masukkan konten kalian disini

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 :
Simpan Konten Artikel Kalian Disini

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:
Letakkan konten kalian disini

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 :
Text, URL Gambar, Video atau Widget kalian Disni

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

Tidak ada komentar:

Posting Komentar

TERIMAKASIH ATAS KUNJUNGANNYA

SAMISANOV Menjelajah Negeri