Cara Menciptakan Fitur Spoiler Box Di Dalam Artikel

Spoiler Box dalam blogging ialah sebuah tombol yang ada didalam artikel atau postingan dan biasanya bertulusan "klik Disini" serta digunakan untuk menyembunyikan sebuah detil mengenai suatu pembahasan ataupun postingan biar tampilan artikel pada blog lebih terlihat rapi dan pendek alias singkat.

Images By: onepedia.web.id

Fitur Spoiler box ini biasanya banyak sekali digunakan 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 sanggup menempatkan banyak sekali 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 kemudian letakkan diatas arahan 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 arahan </body>
6. Ambil script Jquery berikut ini dan tempelkan sempurna ditasa script yang sudah di caru pada langkah nomor 5.

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

7. Setelah final langkah nomor 6 selanjutnya Simpan Template anda.
8. Untuk Memanfaatkan arahan yang telah anda pasang (fitur Spoiler Box) Di dalam postingan anda harus memakai arahan 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.

Sumber https://oremagz.blogspot.com/

Bagikan Artikel ini