Cara membuat Spoiler

11/27/2010 Blogger Tips Trik Blog Tutorial Blogger Widget
Spoiler adalah suatu script yang menyembunyikan link, gambar, kalimat, dan lain-lain. Spoiler ini bermanfaat sekali karena bisa menghemat tempat dan bisa seperti kejutan buat para pembaca.

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




MMMMMMMMMmmmmmmmmm.........








OK mungkin dengan mengklik tombol Open di atas sobat bisa tau atau langsung paham apa itu spoiler. 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??


Selamat mencoba, semoga bermanfaat.

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments

sip mas tutorialnya...siap diimplementasikan

Balas

weh kang,, fotonya kok di kasih yang cantik2 gitu toh... ya mbok di kasih yg lebih serem lagi npa... :))

Balas

kang yg spoiler nambah gbr na gmana kang ???? pliss tunjukin....

EMAIL: prima.wahyudi.95@gmail.com

Balas