Archive for Mei 2018

Cara Membuat Spoiler Keren di Dalam Artikel Blogger

Mei 10, 2018 Add Comment
cara membuat spoiler keren didalam artikel blogger

Cara membuat Spoiler keren didalam artikel blogger memang lagi diburu oleh para penulis, karena cara ini memang ampuh untuk menghemat halaman artikel anda. Namun ada juga yang mengatakan spoiler ini tidak bagus karena pengunjung bisa langsung meninggalkan website anda karena tidak memahami cara melihat info lebih lanjut.

Saya menganjurkan untuk anda yang berkerja seorang penulis untuk menggunakan spoiler karena cara ini paling ampuh untuk memperkecil space yang digunakan didalam halaman tersebut.

Untuk bisa membuat spoiler pada posting blog, harus digunakan kode khusus, yang cukup panjang. Namun begitu, kode ini tidak akan memberatkan blog, bahkan mempercepat proses loading. Berikut ini adalah langkah-langkah yang bisa sobat tempuh kalau ingin membuat spoiler pada posting blog.

 Cara Membuat Spoiler Keren di Dalam artikel Blogger Keren

Membuat spoiler didalam blogger sangat mudah dan banyak sekali, namun Randyseo akan memberikan 2 cara yang paling mudah dipahami oleh sobat sebagai penulis yang ingin blog nya terlihat lebih raih dan keren.

Cara Membuat Spoiler Keren

  • Membuat spoiler dengan tombol spoiler terlempar kebawah yaitu :






  • Membuat spoiler dengan tombol tetap


Judul Spoiler: 
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>
Keterangan:
  1. Tempatkan isi teks/image/video spoiler pada teks berwarna biru.
  2. Ganti teks berwarna merah ("BUKA/TUTUP SPOILER" dan "Klik untuk membuka spoiler") sesuai keinginan.
  3. Untuk mengganti warna box, ukuran text, warna, dan lainnya, ganti/sesuaikan teks berwana orange.
Membuat Banyak Spoiler pada Satu Posting / Halaman Blog
Jika Sobat mau menggunakan beberapa spoiler dalam satu halaman posting, gunakan id unik untuk setiap spoiler. caranya adalah dengan mengganti kata "spoiler" dalam kode dengan kata lain. contohnya seperti berikut (perhatikan yang berwarna biru).

Kode Spoiler Pertama
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>
Kode Spoiler Kedua
<div id="spoiler1" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>
Kode Spoiler Ketiga
<div id="spoiler2" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>
dan seterusnya

Judul Spoiler:
Letakkan teks atau kode script (gambar atau video) di sini

Kuntungan dan Kerugian Memasang Spoiler

kuntungan jika memasang spoiler di dalam blog atau website :
  1. Menghemat space (tinggi) hosting
  2. Mempercepat loading halaman
  3. Menghemat kuota pembaca
  4. Bisa digunakan untuk menyembunyikan keyword tertentu untuk dioptimasi (jangan dilakukan)
Kerugian jika memasang spoiler didalam blog atau website :
  1. Kemungkinan blog akan ditinggalkan pengunjung karena tidak semua pambaca mengerti cara membuat spoiler ataupun ada pembaca yang malas membuka spoiler.
  2. Hingga saat ini spoiler jarang digunakan karena mesin pencari tidak dapat membaca atau mengindex artikel yang ada didalam.
Terima kasih telah membaca cara membuat spoiler dan ini bisa digunakan sebagai mempercantik website anda
Langganan: Postingan (Atom)