Cara Membuat Spoiler Pada Blog

on Sunday 28 October 2012

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:
Cara Membuat Spoiler Pada Blog

<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
Inilah Liryk Lagu PSY-Gangnam Style : Psy Gangnam Style (강남스타일) (Lirik Asli Versi Korean) Oppan gangnam seutail Gangnam seutail Naje neun ttasaroun ingan jeogin yeoja Keopi hanjanui yeo yureul Aneun pumgyeog itneun yeoja Bami omyeon simjangi tteugeowo jineun yeoja Geureon banjeon itneun yeoja Naneun sanai Najeneun neoman keum ttasaroun geureon sanai Keopi siggido jeone Wonsyat ttaerineun sanai Bami omyeon simjangi teojyeo beorineun sanai Geureon sanai Areumdawo sarang seureowo Geurae neo hey geurae baro neo hey Aleumdawo sarang seureowo Geurae neo hey geurae baro neo hey Jigeum buteo gal dekkaji gabolkka Oppan gangnam seutail Gangnam seutail Oppan gangnam seutail Gangnamseutail Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo Jeong sughae boijiman Nol ttaen noneun yeoja Courtesy of Spotlirik.com Ittaeda sipeumyeon mukkeotdeon Meori puneun yeoja Garyeotjiman wenmanhan Nochul boda yahan yeoja Geureon gamgag jeogin yeoja Naneun sanai Jeom janha boijiman Nol ttaen noneun sanai Ttaega doemyeon wanjeon Michyeo beorineun sanai Geunyug boda sasangi Ultungbul tunghan sanai Geureon sanai Areumdawo sarang seureowo Geurae neo hey geurae baro neo hey Aleumdawo sarang seureowo Geurae neo hey geurae baro neo hey Jigeum buteo gal dekkaji gabolkka Oppan gangnam seutail Gangnam seutail Oppan gangnam seutail Gangnamseutail Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo Ttwineun nom geu wie naneun nom Baby baby Naneun mwol jom aneun nom Ttwineun nom geu wie naneun nom Baby baby Naneun mwol jom aneun nom You know what I'm saying Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo

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 :
Hihihihi...


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


Spoiler for Video PSY-Gangnam Style :


Cara Membuat Spoiler Pada Blog 5 Unknown Sunday 28 October 2012 Cara Membuat Spoiler Pada Blog -Pada kesempatan ini Cara Design Blog akan memberikan tutorial cara membuat spoiler pada postingan blog. A...
       


2 comments:

  1. makasih tutornya sangat membantu..kalau cara bikin slide dg albun yg ada gmn bos mhn bantuannya

    ReplyDelete