Show Hide jQuery Sederhana

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Show Hide jQuery Sederhana Pada Blogger. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Show Hide */
.tombol{
padding:2px;
font-size:10px;
width:60px;
}
.judul{
font-size:10px;
font-weight:bold;
font-style:italic;
}
.isi{
background:rgba(0, 0, 0, 0.5);
border:solid 1px #fff;
display:none;
padding:3px;
margin:2px;
-moz-border-radius:5px;
}
/* End Show Hide */

5. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

6. Selanjutnya tambahkan script di bawah ini

<!-- Begin Show Hide -->
<script type='text/javascript'> 
$(document).ready(function(){
$(".tombol").click(function(){
    $(".isi").slideToggle(1000);
  });
});
</script>
<!-- End Show Hide -->

7. Kemudian letakkan di atas

</head>

8. Simpan template

Cara menampilkan dalam artikel atau posting

<div>
<div class="judul">note<input class="tombol" type="button" value="spoiler"></div></div>
<div class="isi">
ISI YANG AKAN DISEMBUNYIKAN
ISI YANG AKAN DISEMBUNYIKAN
ISI YANG AKAN DISEMBUNYIKAN
ISI YANG AKAN DISEMBUNYIKAN
ISI YANG AKAN DISEMBUNYIKAN
</div>

note

Pada tulisan note, bisa anda ganti dengan kata-kata yang lain sesuai dengan selera anda. Pada tulisan ISI YANG AKAN DISEMBUNYIKAN, disitu adalah content yang yang akan disembunyikan. Pada tulisan spoiler, bisa anda ganti juga dengan kata yang lainnya.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait