Cara Membuat Menu Spoiler (Buka/Tutup)

Menu Spoiler ini sudah tidak asing lagi bagi seorang Kaskuser, Sebab disana membuat postingan dengan menambahkan menu spoiler atau menu buka tutup itu sudah biasa. Gunanya yaitu untuk menghemat ruang postingan.

Di blog, anda bisa juga menggunakan menu spoiler ini, baik ditempatkan di postingan ataupun di sidebar blog. Gunanya sama, yaitu untuk menghemat ruang posting atau sidebar. Contohnya silahkan anda klik tombol Buka dibawah ini :



Nah.. bagi anda yang tertarik memasang menu spoiler di blog atau web, silahkan ikuti cara pemasanganya dibawah ini.

Pertama copy kode dibawah ini lalu letakan diatas atau sebelum kode </head>

<style type="text/css">
/* menu spoiler by taohidsonline */
.spoilertombol {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilertombol[value="Buka"] + .spoiler > div {margin-top:-100%;}
.spoilertombol[value="Tutup"] + .spoiler {padding:5px;}
</style>

Setelah itu buka menu Tata Letak, lalu klik Tambah Widget, Pilih yang HTML/JavaScript.
Lalu copy dan pastekan Kode dibawah ini ke dalamnya.

><input class="spoilertombol" type="button" value="Buka" onclick="this.value=this.value=='Buka'?'Tutup':'Buka';">
<div class="spoiler"><div>
Konten Yang Disembunyikan
</div></div>

Bila sudah terpasang klik Simpan.

Ket : Bila anda akan memasang menu spoiler ini dalam postingan, gabungkan kedua kode diatas dalam HTML, bukan yang Compose
Kode yang berwarna merah adalah konten anda yang akan disembunyikan.

Share :