Cara Membuat Spoiler Seperti Kaskus

Cara Membuat Spoiler Seperti Kaskus - Spoiler, mungkin jika kamu sudah pernah mengunjungi forum Kaskus atau melihat Thread di Kaskus. Kamu akan menemukan Quote atau yang biasa disebut Spoiler. Fungsi Spoiler juga bermacam-macam contohnya yaitu, membantu kita dalam menghemat tempat, ataupun membantu mempercepat load dari suatu halaman dimana nanti si pembaca memilih untuk membuka atau tidak Spoiler tersebut.

Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Spoiler Seperti Kaskus di Blogger. langsung saja kamu ikuti langkah-langkah yang ada di bawah ini.

• Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan Kode di bawah ini sebelum</b:skin> atau </style>

/* CSS Spoiler Kaskus - Aka321 */
#spoiler {margin: 1em 0;color: #000;}
#spoiler img {max-width: 100%;}
#spoiler iframe {max-width: 100%;}
.txtspoiler{margin-bottom: 2px;font-weight: 400;font-size: 11px;padding: 3px 0;font-family: sans-serif;height: 20px !important;}
#btnshow{background: #ccc!important;border-radius: 3px;cursor: pointer;width: 40px!important;border: none;font-size: 10px;margin: 0px;padding: 0px;font-family: inherit;height: 14px;}
#btnhide{background: #ccc!important;border-radius: 3px;cursor: pointer;width: 40px!important;border: none;font-size: 10px;margin: 0px;padding: 0px;font-family: inherit;display:none;height: 14px;}
#contentspoiler{background: #EEE;border: 1px solid #CCC;color: black;margin: 0px;padding: 6px;}
.isispoiler{display: block;background: rgb(238, 238, 238);}

• Setelah itu, Salin dan Terapkan kode dibawah ini sebelum </body>

$(document).ready(function(){
$('#btnshow').click(function() {
  $("#btnshow").hide();
  $("#btnhide").show();
    $(".isispoiler").show();
});
$('#btnhide').click(function() {
$('#btnhide').hide();
  $("#btnshow").show();
    $(".isispoiler").hide();
});
    });
</script>

• Jika Sudah, Silahkan Simpan Template.

• Selanjutnya saat kamu membuat postingan baru dan ingin menambah spoiler pada postingan tersebut silahkan Salin dan Terapkan kode di bawah ini di postingan Tab HTML (Bukan Compose)

<div id="spoiler">
<div class="txtspoiler">
<b>Spoiler</b>
&nbsp;for
<i>Judul Spoilernya disini</i> :
<input id="btnshow" onclick="spoiler(this);" type="button" value="Show" />
<input id="btnhide" onclick="spoiler(this);" type="button" value="Hide" />
</div>
<div id="contentspoiler">
<div class="isispoiler">
<div class="texty">

.... ISI SPOILERNYA DISINI ....

</div>
</div>
</div>
</div>

• Demo 

Sekian ilmu yang saya bagikan hari ini. Semoga bermanfaat. Sampai jumpa di tutorial selanjutnya.

---ISI KONTEN ANDA TERAPKAN DISINI---

Spoiler  for Judul Spoilernya disini :

.... ISI SPOILERNYA DISINI ....