Cara Membuat Spoiler Pada Blog

Cara Membuat Spoiler Pada Blog-Pada kesempatan ini Cara Design Blog akan memberikan tutorial cara membuat spoiler pada postingan blog.

Apa itu Spoiler?
Pernahkah kamu mengunjungi forum online di dunia maya semisak kaskus dan lainya? Kalau sudah pernah pastinya tahu penampakan spoiler seperti berikut ini

Biasanya dalam post atau threat menyertakan spoiler. Spoiler tersebut digunakan untuk meng-hide atau menyembunyikan suatu elemen postingan baik foto, tulisan, link, maupun video.

Prinsip spoiler sistemnya buka-tutup atau Show-Hide. Jika spoiler diklik Show maka elemen postingan akan terbuka atau ditampilkan. Bila elemen sudah terbuka dan kita ingin menutup tinggal klik Hide.

Bagaimana cara membuat Spoiler?

Berikut ini cara mudah membuat Spoiler pada postingan blog:

1. Membuat Spoiler untuk menyembunyikan teks atau artikel:

Buka Dasbor Blog kamu
Post > Buat Entri Baru
1. Klik: HTML, untuk memasukan elemen HTML seperti gambar berikut:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler for </b>
<input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">ISI DENGAN ARTIKEL ATAUTEKS</div></div>
</div>

Keterangan:
-Teks warna hijau bisa kamu ganti dengan judul spoiler yang kamu kehendaki
-Tulisan yang berwarana merah silahkan diganti dengan teks yang akan disembunyikan

2. Klik Compose, setelah langkah no. 1

Berikut ini contoh tampilan spoiler untuk sembunyikan teks atau tulisan:
Untuk menampilkan atau melihat teks tinggal klik Show

Spoiler for

2. Spoiler untuk menyembunyikan foto atau image

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler for Novi Hot</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5P74Ri5hoyj9vStx_894OY1GBRF8T63Zz1tttkycioYs_uV-OphauSPo6pIO-GDgdXjPHllxw-lU8tVPymg_Mt59vJDb8J882JDhhoOBGV9pncqYnmG0DmN-4TRptcIaYD0U46Zl2qYQ/s1600/Novi+Bikini.jpg" border="0" alt="indopoptop.blogspot.com">
</div>
</div>
</div>

Keterangan:
-Tulisan warna hijau bisa kamu ganti dengan judul yang kamu mau
-Ganti URL yang berwarna merah dengan URL foto yang akan kamu sembunyikan

Contoh spoiler untuk foto, jika ingin melihat foto tinggal klik Show

Spoiler for Novi Hot :

3. Spoiler untuk menyembunyikan video

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler for Video PSY-Gangnam Style</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

<div class="separator" style="clear: both; text-align: center;"><object class="BLOG_video_class" contentid="209a1b1ea11d2563" height="226" id="BLOG_video-209a1b1ea11d2563" width="320"></object></div>