Cara Membuat Kotak Spoiler Simple di Blog
CSS Javascript
Kotak Spoiler sangat penting di dalam blogger, karena kotak spoiler ini berfungsi sebagai tombol buka tutup untuk menyembunyikan sebuah konten yang berisikan spoiler. Maka dari itu kotak tombol ini dinamakan Spoiler Box.
Fungsi dari kotak spoiler ini tidak hanya menyembunyikan konten seperti teks, gambar maupun video melainkan fungsi lain dari spoiler box ini adalah berfungsi sebagai menghemat space artikel agar artikel yang ditampilkan tidak terlalu banyak dan panjang pada postingan blogger.
Jika sobat blogger penasaran dengan cara pemasangannya, langsung saja sobat simak tutorialnya di bawah ini.
Membuat Spoiler Box Simple di Blog
Seperti biasa hal pertama yang harus sobat lakukan adalah login terlebih dahulu ke akun blogger sobat masing-masing, dan jika sudah klik pada bagian menu Tema dan klik Edit HTML. Lalu tambahkan kode CSS di bawah ini dan letakkan tepat di atas kode ]]></b:skin> atau kode </style>
/* Spoiler Button by Cara Terkini */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}Kemudian tambahkan kode Javascript di bawah ini dan letakkan tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#soore-spoiler').click(function(){
$('#soore-spoiler-content').slideToggle('normal');
})
});
//]]>
</script>Dan juga sobat tambahkan kode JQuery di bawah ini dan letakkan tepat di atas kode </body>
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Terakhir tinggal sobat klik Simpan Tema dan selesai.
Pemanggilan Script
Untuk pemanggilan script Spoiler box sobat salin kode di bawah ini dan letakkan di postingan atau halaman mana saja yang ingin sobat tambahkan.
<div id='soore-spoiler'>
<button>Lihat Spoiler</button>
</div>
<div id='soore-spoiler-content'>
••••••••••••
</div>Untuk demo dan hasilnya sobat bisa lihat link di bawah ini:
