Membuat Fitur Spoiler Box Di Dalam Artikel

Cara Membuat Fitur Spoiler Box Di Dalam Artikel - Hal ini bisanya untuk menyedikitkan artikel pada postingan. Spoiler Box adalah sebuah tombol yang ada didalam artikel atau postingan dan biasanya bertulusan "klik Disini" serta digunakan untuk menyembunyikan sebuah detil mengenai suatu pembahasan ataupun postingan agar tampilan artikel pada blog lebih terlihat rapi dan pendek alias singkat.

Fitur Spoiler box sering sekali dipakai oleh blog atau website yang berbasis server atau layanan download. Ini mereka lakukan untuk mempersingkat postingan, dikarenankan kebanyakan pengunjung blog dengan jenis tersebut tidak memperdulikan dan tidak mau membaca detil yang terlalu panjang, Yang mereka perdulakan serta perlukan hanyalah apa yang ingin mereka dapatkan saja.

Spoiler box ini anda bisa menempatkan berbagai macam hal, seperti:

  • Embed Vidio
  • Kode HTML, CSS, dan Java Script.
  • Dan Bentuk Artikel lainnya asalkan masih di support oleh blogger.

Cara Menambahkan Spoiler Box Pada Postingan Blog sebagi berikut :
  • Buka Tema >> Edit HTML
  • Cari kode </style> atau <b:skin> lalu copy kode di bawah ini, lalau paste kode di atasnya.
#flippy {
text-align: center;
}

#flippy button {
background: #347ec9;
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: 0px 3px 0px 0px #347ec9;
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: 0px;
}

#flippanel {
padding: 24px;
display: none;
}
  • Cari kode </body> lalu copy kode di bawah ini, lalau paste kode di atasnya.
<script>
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>
  • Copy kode di bawah ini >> Paste di postingan dalam bentuk HTML.
<div id="flippy"><button>Klik Disini</button></div>
<div id="flippanel">
Masukkan Text/Gambar/Video/Apapun Disini
</div>
  • Selesai.

Keterangan
1. Biru : Untuk Tulisan Tombol Yang Akan Anda Pakai
2. Merah : Untuk Kode atau apapun yang ingin anda masukkan ke Spoiler Box

Semoga panduan ini bisa bermanfaat buta kalian. Jangan lupa untuk ilmunya di bagikan kepada orang lain.
Bagikan:

Post a Comment