5
Anda yang biasa nongkrong di forum mungkin sudah tak asing lagi dengan spoiler. Yaitu teknik menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Cara membuat spoiler di postingan blog (baik berbasis blogger/blogspot maupun wordpress) sangat mudah. Tapi sebelum menginjak ke tutorialnya, yang saya ketahui setidaknya ada dua model spoiler.
1.
Contoh
isi spoiler

2.


Langkah - Langkah Membuatnya:
1. Masuk ke Posting-Entri Baru
2. Pilih "Edit HTML" (awalnya Compose)
3. Letakkan Kode di bawah ini:


  • Untuk Model 1:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler
</div></div></div></div>

Ket:
- Ganti kata yang tercetak merah sesuai kebutuhan.
- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

4. Contoh: kita mau bikin spoiler berisi Gambar Kucing.
Tetap pada Mode "Edit HTML", klik insert image (icon gambar pemandangan). Lalu atur letak gambar, besar gambar, kemudian klik unggah.
Contoh Kode HTML gambar kucing:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-yZ7TWA5_wvo/Thx8R9sdy6I/AAAAAAAAAYA/lpbGRiOD6_E/s1600/Peterbald-kitten.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="349" src="http://3.bp.blogspot.com/-yZ7TWA5_wvo/Thx8R9sdy6I/AAAAAAAAAYA/lpbGRiOD6_E/s400/Peterbald-kitten.jpg" width="400" /></a>


Maka, kode selengkapnya di spoiler:
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Aura Kasih</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-yZ7TWA5_wvo/Thx8R9sdy6I/AAAAAAAAAYA/lpbGRiOD6_E/s1600/Peterbald-kitten.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="349" src="http://3.bp.blogspot.com/-yZ7TWA5_wvo/Thx8R9sdy6I/AAAAAAAAAYA/lpbGRiOD6_E/s400/Peterbald-kitten.jpg" width="400" /></a>
</div></div></div></div>

Dan, hasilnya seperti ini:
Kucing




  • Untuk Model 2, tekniknya agak berbeda:
<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
isi spoiler
</span></div></div></div></div></div>

Ket:
- jika spoiler berisi gambar, ganti 'isi spoiler' dengan URL gambar yang sudah diupload.
- jika spoiler berisi video, ganti 'isi spoiler' dengan embed code video.

  • Nah, kalau untuk blog berbasis wordpress caranya gini:
<div>
<input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
teks/HTML gambar/embed video yang disembunyikan
</div>
</div>

Semoga artikel ini bermanfaat bagi sobat - sobat sekalian. Selamat mencoba dan semoga berhasil.

G+

Post a Comment

  1. seeeph... berhasil diterapkan ilmunya di dunia ane gan... thx ya gan...

    ReplyDelete
  2. mas, kalau tombol spoiler itu diganti teks doang (bukan tombol) bisa ga?

    jadi maksud saya begini, syaa pernah liat di Google ada link yang disebelah kirinya itu terdapat tanda (+) nah saat link itu di klik, konten atau penjelasan muncul dibawahnya. dan saat penjelasan atau konten tersebut terbuka, tanda (+) menjadi tanda (-). bagaimana tips membuatnya?

    makasih

    ReplyDelete
  3. Kok nggak bisa di wordpress.com gan??

    ReplyDelete
  4. thank you om inponya. dicoba dulu ye :)

    ReplyDelete

 
Top