Sabtu, 21 Agustus 2010

Membuat Spoiler Pada Blogger

Apa itu Spoiler? Spoiler adalah salah satu cara yang digunakan oleh blogger atau netter pada Forum/ web (paling sering KASKUS) yang berfungsi untuk menyembunyikan, teks, gambar, atau video,dll. Kali ini saya akan membahas untuk 2 jenis Blog yaitu BLOGGER dan WORDPRESS, yang pertama kita akan bahas

Membuat Spoiler Untuk Blogger

Contohnya bisa dilihat disini:
Judul Contoh
Coba-coba

Untuk membuat seperti Contoh diatas berikut Kodenya:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Contoh</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;">
coba-coba
</div></div></div></div>

Keterangan:
- Ganti kata yang tercetak merah sesuai kebutuhan.
- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam 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, saya akan memasukkan gambar Crayon shinchan kedalam spoiler saya, maka akan saya ubah dulu kedalam bentuk script seperti berikut
<a href="http://onnyjuga.blogspot.com" target="_blank"><img src="http://2.bp.blogspot.com/_-S224O1d7Vc/TG_y-EYMPXI/AAAAAAAAAP4/aG3sr4Ehmm8/s1600/shinchan.png" border="0" alt="Image By Unic77 in Google"></a>

Keterangan Script:
Untuk warna merah bisa diganti url gambar sobat untuk warna biru bisa diganti alamat blog sobat
Hasilnya seperti berikut:

Shinchan Indonesia
Image By Unic77 in Google
Untuk membuat spoiller diatas bisa anda gunakan script berikut:


<div><div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Shinchan Indonesia</span></i><input value="Show" 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 = '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://onnyjuga.blogspot.com" target="_blank"><img src="http://2.bp.blogspot.com/_-S224O1d7Vc/TG_y-EYMPXI/AAAAAAAAAP4/aG3sr4Ehmm8/s1600/shinchan.png" border="0" alt="Image By Unic77 in Google"></a></div></div></div></div>

Keterangan: Jika gambar terlalu besar, sebelum diupload kecilkan dulu size-nya dengan photoshop. Usahakan lebarnya tak lebih dari 10 cm.

Sedangkan untuk model 2, tekniknya agak berbeda:

<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>
Keterangan:
- jika spoiler berisi gambar, ganti 'isi spoiler' dengan URL gambar yang sudah diupload.
- jika spoiler berisi video, ganti 'isi spoiler' dengan embed code video.
Nah, kalau untuk blog berbasis WORDPRESS caranya gini:



<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 disembunyikan

</div>

</div>

gimana gampang khan, sekarang ingin membuat blog jadi lebih sangar dan menarik bisa sangat mudah, yang penting bagi anda terus saja belajar dan belajar, semoga artikel ini bermanfaat. sukses selalu untuk anda.

0 Comments
Tweets
Komentar

0 komentar:

Leave a Comment

Klik Iklannya Donk