Sabtu, 19 November 2011

Cara Membuat Spoiler di Blogspot

Okeh! biarpun saya sambil merem melek nulis ini postingan, tetapi niat baik dan mulia saya untuk sharing mematikan semua itu.. :)
Sebelum memulai, lebih baik kita mengetahui dulu apa itu spoiler dan buat apa sih?
ya mungkin buat para kaskuser istilah spoiler bukan hal yang asing lagi, malahan udah jadi keseharian. Jadi gini, spoiler itu semacam jendela yang kita sembunyikan dalam postingan kita nanti, saat di klik tombol spoiler nya, isi yang telah kita buat di dalam spoiler akan keluar. So? BUAT APAHHHHH? (Muncrat!) buat gaya-gaya an? Biar keren? Biar di bilang kayak kaskuser gitu? BUKAN??!!

Sebenernya spoiler itu berguna saat kita membuat postingan yang amat sangat panjang tapi masih ada poin-poin penting nya, nah supaya keliatan rapi dan ga panjang-panjang banget, buat aja spoiler di setiap poin nya. Setuju?. Spoiler juga bisa untuk meletakkan gambar yang resolusinya gede dan ga muat di template blog kita atau gambar nya kita sembunyikan supaya banyak yang penasaran. Boleh itu juga Boleh...

Langsung aja, sebenernya membuat spoiler itu mudah banget, kalian tinggal pilih mode HTML pada saat mau menulis postingan. Untuk membuat spoiler nya kalian bisa copas kode HTML dibawah ini..

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</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;">
<div style="display: none;">

"Masukkan isi spoiler yang anda inginkan disini"


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



SELESAI! udah kayak gitu doang? Mudah banget kan?
Selamat Mencoba :)




Tidak ada komentar:

Posting Komentar