Macam-macam Tombol Spoiler dan Cara Membuat Tombol Spoiler

Anda tentu sudah mengenal istilah spoiler bukan? Di dalam sebuah posting atau artikel, anda pun bisa menyisipkan tombol spoiler seperti yang sering anda temui di thread kaskus dan di beberapa forum lainnya. Anda bisa memasang tombol spoiler dengan gaya anda sendiri. Ada beberapa macam tombol spoiler. Di bawah ini akan infodari bahas mengenai macam-macam tombol spoiler dan cara membuat tombol spoiler.

Spoiler akan bermanfaat untuk meringankan loading halaman blog anda. Spoiler sendiri berfungsi untuk menyembunyikan sebuah objek, baik tulisan atau gambar. Jika ingin dibuka, hanya diperlukan menekan sebuah tombol saja. Seperti misalnya membuat gambar atau tulisan tersembunyi, yang hanya akan bisa dilihat saat ditekan sebuah tombol spoiler nya. Seperti apa dan bagaimana cara membuat tombol spoiler tersebut?

Berdasarkan cara penempatannya, ada 2 cara penulisan script tombol spoiler.

1. Script Pertama

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><strong>Spoiler</strong>: <input style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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'; }" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Taruh kode atau text yang akan di sembunyikan di sini</div>
</div>
</div>

Maka hasilnya akan tampak seperti tombol spoiler di bawah ini.

Spoiler:
Taruh kode atau text yang akan di sembunyikan di sini

2. Script kedua

Ada alternatif lain cara penulisan script yang sedikit agak berbeda. Ini hanya sebagai pilihan saja. Script pada no.1 diatas juga bisa digunakan. Untuk script yang kedua ini, saya asumsikan bahwa anda sudah tahu caranya dan dimana anda bisa mengedit css template blog anda, baik untuk wordpress maupun untuk blogger. Untuk wordpress, anda harus memasukkan kode-kode script di bawah ini dengan merubah style.css nya.

Di bawah ini adalah cara menambahkan alternatif script yang harus dituliskan pada blogger.

  • Tambahkan kode Css berikut ini sebelum tag  ]]></b:skin>
.commenthidden {display:none;}
.commentshown {display:inline;}
  • Tambahkan java script Berikut sesudah tag  ]]></b:skin>
<script type="text/javascript">// <![CDATA[
    function togglecomments (postid) {var whichpost = document.getElementById(postid);if (whichpost.className=="commentshown") {whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }}
// ]]></script>
  • Tambahkan kode berikut di tiap postingan yang akan di pasang spoiler.
<div id="Nama_Spoiler" class="commenthidden">Maka hasilnya akan sama seperti contoh tombol spoiler dalam script pertama diatas.</div>
<div class="commenthidden"></div>
<div class="commenthidden">Kode atau text yang mau di sembunyikan</div>

Maka hasilnya akan sama dengan contoh tombol spoiler di script pertama diatas.


Dari dua script di atas, ada kekurangan dan kelebihan masing masing.
Script pertama memang simpel, tidak ribet instalasinya, tapi jika dalam satu posting mau di pasang banyak spoiler maka akan memakan banyak tempat untuk mengulang-ulang script.
Script kedua instalasinya memang agak ribet,tapi jika sudah di instal, berikutnya hanya memasang kode yang ke tiga saja dan script yang tidak terlalu banyak.

Nah itulah keuntungan dan kerugian dari 2 script di atas.

Berikutnya, jika anda ingin mengotak-atik penampilan tombol spoiler yang akan anda gunakan, berikut ada beberapa macam contoh tombol spoiler. Gunakan tombol spoiler di dalam posting sesuai dengan yang anda inginkan.

1. Contoh Spoiler 1 :

Kode untuk membuatnya :

<div style="border: 0px inset green; padding: 0px;">
<div><button class="button" title="Click to show the spoiler." onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" type="button"><span style="color: black;"><span style="color: #006600; font-weight: bold;">SPOILER 1 </span></span></button></div>
<div id="spoiler" style="display: none;"><span style="font-weight: bold; color: #006600;">Letakkan Kode yang Ingin disembunyikan disini</span></div>
</div>

2. Contoh Spoiler 2

Kode untuk membuatnya :

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="LIHAT" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">Letakkan Kode yang disembunyikan disini</div>
<div id="hide"></div>
</div>

3. Contoh Spoiler 3

Kode untuk membuatnya :

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">LETAKKAN KODENYA DISINI</div>
<div id="hide"></div>
</div>
</div>

4. Contoh Spoiler 4 :

LETAKKAN KODENYA DISINI

Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px;" 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'; }" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">LETAKKAN KODENYA DISINI</div>
</div>
</div>

5. Contoh Spoiler 5 :

Judul

LETAKKAN KODE SOBAT DISINI

Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><em></em><input style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" 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" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>


(Sumber: http://www.rofingi.com/2011/02/macam-macam-tombol-spoiler.html dan

http://tanpa-isi.blogspot.com/2011/06/membuat-berbagai-macam-tombol-spoiler.html)

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Captcha Verification : * Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: