Membuat Spoiler di Blog


Seperti kita ketahui Spoiler adalah suatu cara untuk menyembunyikan suatu teks/gambar/video pada sebuah postingan, baik itu pada suatu forum/blog/wordpress.
Spoiler bermanfaat untuk menghemat waktu pada saat membuka blog dan untuk menghemat tempat pada sebuah postingan.
Disini ada 2 model spoiler yang bisa sobat gunakan pada postingan sobat.
Contoh model 1 :

Judul 

isi spoiler

Cara membuat spoiler 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 berwarna merah dengan kata yang sobat mau.
- Jika spoiler berisi gambar, silahkan sobat upload dulu dengan pengupload seperti 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.

Contoh: kita mau buat spoiler berisi foto anda yang Tampan. Misalnya diupload dengan Photobucket dan kode HTML-nya seperti ini:
<a href="http://s1117.photobucket.com/albums/k589/484817/?action=view&amp;current=indonesiap128a-500rupiah-1992-donat.jpg" target="_blank"><img src="http://i1117.photobucket.com/albums/k589/484817/indonesiap128a-500rupiah-1992-donat.jpg" border="0" alt="Photobucket"></a>

Maka, kode di spoilernya seperti ini :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Photo Orang Tampan</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;">
<a href="http://s1117.photobucket.com/albums/k589/484817/?action=view&amp;current=indonesiap128a-500rupiah-1992-donat.jpg" target="_blank"><img src="http://i1117.photobucket.com/albums/k589/484817/indonesiap128a-500rupiah-1992-donat.jpg" border="0" alt="Photobucket"></a>
</div></div></div></div>

Dan hasilnya seperti ini :

Photo Orang Tampan


Photobucket


Dan jika sobat memasukan gambar, usahakan ukurannya tidak lebih dari 10 cm.
Jika ingin dikecilkan silahkan edit dahulu dengan Photoshop, tetapi jika ingin dibesarkan silahkan datang saja ke Mak Erot. Wkwkwkwk.....

Bagaimana???
Sobat sudah mengerti bukan? Ok. Kita lanjut ke model 2.
Contoh model 2 :
<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.

Sudah mengertikah...???

Naaah kalo untuk Wordpress, kodenya seperti ini :

<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 ingin disembunyikan
</div>
</div>


Jika sudah mengerti, silahkan langsung coba biar sobat paham.
Saya dapatkan informasi ini dari kang Wawanwae

comment 5 komentar:

Muhammad Fakhrial Zld on May 3, 2011, 12:03:00 PM said...

ini ditaroh dimana sob :t

Ipank Bastarz said...

Ini spoiler untun Postingan Mas.
Jgn lupa ketika mengetik ubah dari "Compose" ke "HTML" untuk kodenya saja.

Thank' for your visit. :x

Kanganip on May 3, 2011, 1:43:00 PM said...

anjriiiit.. tutoriaL ini ni yang selama ini ane cari2 tenkyu gan ... mantabh dweh semangat terus

Blogging With Me on May 3, 2011, 2:16:00 PM said...

apa tulisan Show bisa dirubah mas ?? kok Show trus mana tombol Hide'a ??

Ipank Bastarz said...

Tulisan show bisa di rubah Mas, bisa d rubah ke "Open" atau "Buka"

Cari za kata "show" atau "hide" trz ganti dgn kata yg kita inginkan.

Thank's for your visit.

Post a Comment

Berikut adalah beberapa aturan untuk memberikan komentar di blog ini :

1. Semua komentar kecuali spam dipersilahkan.
2. Anda dipersilahkan jika ingin membuat permintaan dan pertanyaan.
3. Jangan gunakan nama-nama seperti Admin, Penulis, Operator, atau yang lainnya untuk memberikan komentar karena akan membuat orang lain salah paham.
4. Tinggalkan Alamat Email/Url Blog Anda, jika Anda memberi komentar sebagai "Anonymous"

"Terima kasih banyak telah berkomentar"

Delete this element to display blogger navbar

 
© cagappaeh | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
Powered by Blogger