Cara Membuat Fitur Spoiler Box Di Dalam Artikel

Spoiler Box dalam blogging 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.

Images By: onepedia.web.id

Fitur Spoiler box ini biasanya banyak 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.

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

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

Cara Menambahkan Spoiler Box Pada Postingan Blog

1. Buka dashboard Blogger
2. Pilih Tema, Lalu Klik Edit HTML.
3. Tekan Ctrl + F untuk mencari </style> atau <b:skin>
4. Copy Script dibawah ini lalu letakkan diatas kode yang telah anda cari sebelumnya.

#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;
}

5. Lalu Selanjutnya silahkan anda cari kode </body>
6. Ambil script Jquery berikut ini dan tempelkan tepat ditasa script yang sudah di caru pada langkah nomor 5.

<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

7. Setelah selesai langkah nomor 6 selanjutnya Simpan Template anda.
8. Untuk Memanfaatkan kode yang telah anda pasang (fitur Spoiler Box) Di dalam postingan anda harus menggunakan kode berikut ini untuk memanggilnya.

<div id="flippy"><button>Klik Disini</button></div>
<div id="flippanel">
Masukkan Text/Gambar/Video/Apapun Disini
</div>

Keterangan

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

Oke, Sekian postingan singkat kali ini. Terima kasih Kepada Bang Anggasave yang telah menjadi Sumber Ide dan Sumber Script Pada postingan kali ini. Semoga bermanfaat dan menambah wawasana anda sekalian.