Tutorial Membuat Tombol Spoiler pada Blog - ACREZY

Spoiler banyak ditemukan pada forum-forum diskusi.

Fungsinya pun banyak tergantung tujuan dari yang membuat.

Dalam forum tertentu, pada forum film misalnya. Spoiler digunakan untuk mengantisipasi agar member lain tidak terkena bocoran cerita dari film yang dibahas, karena isi spoiler biasanya bocoran kelanjutan story.

Spoiler juga bisa berisi konten informasi untuk mengejutkan pengujung, itu tergantung tujuan yang membuat.

Selain itu spoiler juga dapat mempercepat loadingnya halaman.

Pada kali ini saya akan membagikan Tutorial Membuat Spoiler.

Yuk ikuti langkah-langkahnya!

Tutorial Membuat Spoiler

---

Sebelumnya pastikan terlebih dahulu JQuery telah ada pada blog kamu.

Jika belum terapkan script berikut sebelum </head>

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

Kemudian salin dan letakan kode CSS berikut sebelum </style> atau ]]></b:skin>

/* CSS SPOILER - ACREZYBLOG */
.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{background:#272727;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 #585858;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:#eee;border:0}
.flippanel{padding:24px;display:none}

Jika sudah lalu salin dan letakan script berikut sebelum </body>

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

Setelah itu jangan lupa untuk Simpan

Dan berikut ini kode HTML yang bisa diterapkan pada postingan kamu

<div class="centerflip"><button class="flippy">Spoiler</button>
<div class="flippanel">
# Konten Kamu Disini #
# Konten Kamu Disini #
# Konten Kamu Disini #
# Konten Kamu Disini #
</div>
</div>

Untuk demonya bisa kamu lihat dengan klik tombol berikut

Result

Sekian Tutorial Membuat Spoiler kali ini, semoga bermanfaat dan terima kasih telah berkunjung!