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>.

<script type = 'text/javascript'>
$(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 Spoiler</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 Spoiler

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

• Setelah itu, ubahlah Kode yang sudah ditandai sesuai yang kamu inginkan. Selesai.

• Live Preview

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