Cara Memasang Spoiler di Postingan Blog

Rezapedia.com - Pada dasarnya, memasang spoiler ke dalam postingan blog adalah bertujuan untuk menghemat tampilan pada artikel dengan menyembunyikan sebagian atau lebih tulisan dan bisa juga untuk membuat si pengunjung blog kita merasa penasaran dengan apa yang ada di balik kolom spoiler ini.

Penggunaan spoiler ini pada awalnya dipasang pada situs forum seperti kaskus, indowebster, dan forum-forum lainnya untuk menyembunyikan tulisan atau gambar yang terlalu panjang. Namun seiring meningkatnya dunia blogging, penggunaan spoiler juga sering kali diterapkan ke dalam postingan blog.

Baca juga: Cara Membuat Syntax Highlighter di Blog

Fungsi dari memasang spoiler keren ini di blog adalah untuk menyembunyikan password, text, gambar ataupun yang lainnya dan pembaca harus mengeklik tombol spoiler agar tahu isi dari spoiler tersebut.

Cara Memasang Spoiler Keren di Blog

1. Pertama kalian harus buka Blogger > Tema > Edit HTML.

2. Lalu tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>.

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{background:#aa65c7;color:#fff;text-align:center;margin:0 auto;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;box-shadow:0 3px 0 0 #883da7;vertical-align:middle;cursor:pointer;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
.flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.flippanel{padding:24px;display:none}

3. Selanjutnya kalian pasang kode JQuery ini tepat di atas kode </body>.

<script>
$(function(){
  $(".flippy").on("click", function(){
    $(this).parent().children(".flippanel").slideToggle("normal");
  });
});
</script>

4. Jika sudah, klik Simpan tema.

Cara Pasang Spoiler ke Postingan Blog

Untuk memasang spoiler pada postingan blog, kalian hanya perlu masukkan kode di bawah ini di postingan bagian HTML.

<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
_ISI_SPOILER_DISINI_
</div>
</div>

Jika sudah, Publish Postingan kalian.

Kelebihan dan Kekurangan Spoiler Box di Blog

Kelebihan:

• Terlihat keren karena bisa di buka dan tutup
• Mempersingkat tampilan halaman artikel
• Cocok apabila kalian suka nge-review film dan ingin memberikan spoiler alert.

Kekurangan:

• Artikel tidak terbaca secara utuh oleh pengunjung, karena spoiler box tidak diklik
• Pengunjung malas membuka spoiler karena terlalu banyak
• Pengunjung mungkin tidak tau cara membuka spoiler box
• Pengunjung takut kalau mengeklik kolom spoiler akan dibawa ke halaman lain

Bagaimana? apakah kalian tertarik untuk memasang kolom spoiler di blog?

Baca juga: Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Terima kasih telah membaca artikel Cara Memasang Spoiler di Postingan Blog, semoga artikel yang mimin bagikan ini dapat bermanfaat untuk kalian semua. Jika ada pertanyaan terkait artikel ini, silahkan komen di bawah ya.

Jangan lupa untuk cek artikel menarik lainnya hanya di rezapedia.com!

Isam

Blogger, History Major, Cool Guy

Bagikan Artikel ini