Blogermie.com: Cara Membuat Spoiler

25 September 2011

Cara Membuat Spoiler

Spoiler biasanya digunakan untuk meng-hidden / menyembunyikan gambar, teks  supaya irit tempat. Spoiler sendiri fungsinya adalah untuk memperkecil ruang posting, kode script atau artikel agar tidak makan tempat.

Sebenarnya kita juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.
Berikut Langkahnya:
  • Masuk menu dashboard, klik NewPost

cara membuat spoiler
buat spoiler

  • Pada Posting, Klik menu Edit HTML tambahkan kode ini


<div style="margin: 5px 20px 20px;">
<div style="margin-bottom: 2px;">
<b>KLik</b> &gt;&gt; <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 =
'Tutup'; } else {
this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName ('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Buka !'; }" style="margin: 0px;
padding: 0px; width: 85px;" type="button" value="Lihat !" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukan teks, gambar atau video disini

</div>
</div>
</div>

Contoh Spoiler Menggunakan Kalimat >>
Masukan teks, gambar atau video disini

  • Nah, jika ingin membuat Spoiler untuk gambar, inilah kode yang perlu ditambahkan:

<div style="margin: 5px 20px 20px;">
<div style="margin-bottom: 2px;">
<b>KLik</b> &gt;&gt; <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 =
'Tutup'; } else {
this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName ('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Buka !'; }" style="margin: 0px;
padding: 0px; width: 85px;" type="button" value="Lihat !" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-P6vLzlt_pTo/Tn8cW0LESEI/AAAAAAAABSw/uIpWdfuKi8w/s1600/Cecuguk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="http://1.bp.blogspot.com/-P6vLzlt_pTo/Tn8cW0LESEI/AAAAAAAABSw/uIpWdfuKi8w/s320/Cecuguk.jpg" width="100" /></a></div>

</div>
</div>
</div>
buat spoiler


Contoh Spoiler Menggunakan Gambar >>

membuat spoiler

Mudah bukan? selamat mencoba

Heru Prasetyo Blogermie.com Updated at: 9/25/2011 08:31:00 PM

1 komentar:

  1. WAH..KREN NC CR BUAT SPOILERNYA...? thnks infonya,cb dl ah...

    BalasHapus