22 March 2015

Cara Membuat Menu Spoiler (Buka/Tutup)

Momos Fobetor_22 March 2015

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.

Bagikan Artikel Ke Sosial Media


Artikel Terkait lainya tentang :

0 Comments

Silahkan berkomentar sesuai tema posting di atas. Komentar jorok, spam, atau tidak relevan, akan kami hapus secara permanen.