Cara Membuat Spoiler Keren di Blog dengan jQuery

Cara Membuat Spoiler di Dalam Postingan Ala TKJMBAYO - Assalamualaikum, spoiler biasa diartikan sebagai 'bocoran'.Guna spoiler dalam postingan adalah memangkas panjang layout postingan dengan menyembunyikan kalimat / kode tertentu.Ya, intinya sih biar irit jadi scroll dalam halaman tidak panjang banget.

Cara kerjanya cukup mudah, yaitu dengan menekan tombol lalu kalimat / kode akan muncul.Ya seperti yang sudah saya ketik barusan, fungsinya untuk menyembunyikan kalimat.

Demo Disini

Apa yang dibutuhkan?

• Bootstrap CSS
• jQuery

Memasukkan Script dan CSS di Template

Pertama - tama, masukkan CDN Bootstrap Terbaru untuk menset CSSnya.

Letakkan kode dibawah pada bagian atas </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

 Kedua, masukkan script jQuery di section (diatas atau dibawah terserah ) </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Ketiga, masukkan kode dibawah di section </head>

<style>
#spoiler{display: none;border: 2px solid black;background: #b99446;outline-color: #280cf3;padding-left: 5px;}

#spoiler1{display: none;border: 2px solid black;background: #b99446;outline-color: #280cf3;padding-left: 5px;}

#spoiler2{display: none;border: 2px solid black;background: #b99446;outline-color: #280cf3;padding-left: 5px;}

#spoiler3{display: none;border: 2px solid black;background: #b99446;outline-color: #280cf3;padding-left: 5px;}
</style>

Membuat Spoiler pada Mode HTML

Masukkan kode dibawah pada Mode HTML pada saat akan membuat postingan baru.

<button class="btn btn-danger btn-lg">Spoiler Alertt!!!!</button><br /><div id="spoiler"><br />--Kode / Kalimat disini<br /></div><br /><script><br />$(document).ready(function(){<br /> $("button").click(function(){<br />$("#spoiler").toggle(1000);<br />});<br />});<br /></script><br />
Keterangan :

1. Ganti tulisan "Spoiler Alertt!!!!" dengan selera kalian masing - masing sebagai display tulisan pada tombol.
2. Taruh kalimat / kode kalian pada bagian --Kode / Kalimat disini

Membuat spoiler di blog lebih dari 1

Spoiler Kedua

<button class="btn btn-danger btn-lg">Spoiler Alertt!!!!</button>
<div id="spoiler1">
--Kode / Kalimat disini
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#spoiler1").toggle(1000);
    });
});
</script>

Spoiler ketiga :

<button class="btn btn-danger btn-lg">Spoiler Alertt!!!!</button>
<div id="spoiler2">
--Kode / Kalimat disini
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#spoiler2").toggle(1000);
    });
});
</script>

Tambahkan kode - kode diatas lalu ganti <div id="spoiler"> sampai seterusnya / seperlunya saja.

Apakah menggunakan spoiler di blog dapat memperlambat loading blog?

Tentunya, seiring bertambahnya script ataupun css loading pada blog akan terasa lebih lama.Meskipun demikian, dengan menggunakan spoiler justru membuat loading blog lebih cepat karena akan mempersingkat layout postingan.Asalkan digunakan dengan bijak dan tidak berlebihan karena segala sesuatu yang berlebihan kan tidak baik.

Sekian Terimakasih :)

Wassalamualaikum

Share :