Membuat Tombol Buka Tutup Di Blog

Spoiler/Tombol Buka Tutup adalah suatu script yang menyembunyikan link, gambar, kalimat, dan lain-lain. Spoiler/Tombol Buka Tutup ini bermanfaat sekali karena bisa menghemat tempat dan bisa seperti kejutan buat para pembaca.

Spoiler/Tombol Buka Tutup ini bisa sobat pasang di mana saja terserah sobat maunya, misalkan di bagian postingan untuk menyembunyikan postingan yang panjang, atau di sidebar-sidebar untuk menyembunyikan untuk menyembunyikan widget-widget sobat atau mungkin juga untuk yang kejutan kejutan gitu hehehe.

OK bagi para sahabat blogger yang masih pemula atau awam alias newbe seperti saya, mungkin belum paham alias tidak tahu apa, gimana, dan seperti apa itu yang namanya spoiler silahkan klik tombol buka di bawah ini, apa gerangan yang terjadi hehehe.

Spoiler:

Sorry Sob bukanya ngagetin,ini cuma buat ngetes aja.........

OK mungkin dengan mengklik tombol Open di atas sobat bisa tau atau langsung paham apa itu spoilerTombol Buka Tutup/. kalau sudah paham dan tahu kemudian ingin mencobanya atau membuat mari kita lanjut ke tahap berikutnya.

Kalau untuk menyembunyikan Widget langkahnya sebagai berikut :

1. Seperti biasa Log In ke Blog sobat
2. Setelah login ke dasbor
3. Pergi ke Tataletak (Rancangan)
4. Tambah Gadget (HTML/Javascript)
5. Setelah itu masukan kode di bawah ini:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Naaah di sini isi yang mao sobat sembunyiin

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

Kalau untuk menyembunyikan Postingan tinggal paste aja di area kerja postingan OK.

PERHATIAN
Kode atau tulisan Buka yang berwarna merah silahkan sobat ganti dengan kata sesuai keinginan, misalnya Show, Open atau apa aja deeh. terus tulisan Tutup yang berwarna kuning silahkan ganti dengan kata Close atau apa ja terserah gimana sobat. Terus satu lagi kalimat atau kata Naaah di sini isi yang mao sobat sembunyiin ganti dengan isi yang mao sobat sembunyikan OK. selesai deeh gampang khan??

Posted in: TUTORIAL BLOG