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.
Keterangan:
-Teks warna hijau bisa kamu ganti dengan judul spoiler yang kamu kehendaki
-Tulisan yang berwarana merah silahkan diganti dengan teks yang akan disembunyikan
Berikut ini contoh tampilan spoiler untuk sembunyikan teks atau tulisan:
Untuk menampilkan atau melihat teks tinggal klik Show
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
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/AVvXsEjAOwzrIts6xmtCn3977I564JLf3FzC_Oc6_jaCSF-eYRMFWpcjXjXnJ0GxhJOHnT1rQprfp8AS-1xfT6yFtUnwyThqWi9Q1PEzRviNUVlvQVnqTkSTw2lLBCVSXTH5EIB2IZ7Sy0AyVsw/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>
</div>
</div>
</div>
Keterangan:
-Tulisan warna hijau silahkan diganti dengan judul spoiler video
-Kode HTML warna merah ganti dengan separator video yang akan disembunyikan
Sebagai contoh spoiler video:
Jika ingin membuka tinggal klik Show
Sebagai contoh spoiler video:
Jika ingin membuka tinggal klik Show
Spoiler for Video PSY-Gangnam Style :