Cara Pasang Tombol Spoiler Seperti Kaskus

Kali ini saya akan bagikan Tutorial Cara Pasang Tombol Spoiler Seperti Kaskus. pasti diantara kalian suka mampir di kaskus untuk baca artikel, jualan, beli barang dan lain lain. nah kali ini saya akan bagikan tutorialnya siapa tau ada yang cari :).
Baiklah langsung saja ke TKP.

1. Buka Blogger kalian.

2. Blog kalian > Template > Edit Template.

3. Salin Kode dibawah 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);}

4. Setelah itu salin dan pastekan 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>

5. Save Template kalian.

6. Buat Post kalian lalu edit post lewat HTML bukan COMPOSE. lalu pastekan script dibawah ini.

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

Judul Spoiler diisi terserah kalian.
Isi Spoiler diisi dengan isi postingan yang mau di sembunyikan.

7. Publish kan posting kalian dan lihat Hasilnya.

Sekian untuk tutorial kali ini semoga bermanfaat dan sampai jumpa di tutorial lainnya :D
Jika Masih Bingung Silahkan Berkomentar . . .
Kunjungi Vetizens terus untuk informasi terupdate . . . .

Sumber : AKA321