Cara Membuat Spoiler di Postingan Blog Berbasis Blogger/Blogspot dan Wordpress

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

isi spoiler

2.

isi spoiler

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnELsycdbJ6bp0LTigWoKqPufXBDBHFptPuRzL-J6GjjRos6r9dly2-YG5y7Tfq2tuAhgKsIXBP0YvnP-IxkvHWe3wsPy3XMeW4SwcBGW-yd2jCfLlRUKVZGvHQ0blbJa0VzpJDtx1o21R/s1600/Peterbald-kitten.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnELsycdbJ6bp0LTigWoKqPufXBDBHFptPuRzL-J6GjjRos6r9dly2-YG5y7Tfq2tuAhgKsIXBP0YvnP-IxkvHWe3wsPy3XMeW4SwcBGW-yd2jCfLlRUKVZGvHQ0blbJa0VzpJDtx1o21R/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnELsycdbJ6bp0LTigWoKqPufXBDBHFptPuRzL-J6GjjRos6r9dly2-YG5y7Tfq2tuAhgKsIXBP0YvnP-IxkvHWe3wsPy3XMeW4SwcBGW-yd2jCfLlRUKVZGvHQ0blbJa0VzpJDtx1o21R/s1600/Peterbald-kitten.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnELsycdbJ6bp0LTigWoKqPufXBDBHFptPuRzL-J6GjjRos6r9dly2-YG5y7Tfq2tuAhgKsIXBP0YvnP-IxkvHWe3wsPy3XMeW4SwcBGW-yd2jCfLlRUKVZGvHQ0blbJa0VzpJDtx1o21R/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.

Share

Like

G+

Tweet

Tweet