htmla

Rabu, 10 Juni 2009

Cara Membuat Spoiler pada Posting Blog

Sebelumnya saya akan menjelaskan bagaimana cara membuat spoiler pada posting blog yang ditanya oleh Yoga Adhi Pratama.

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. (berlaku juga untuk web)

Berikut adalah kode javascipt yang harus ditambahkan dalam posting:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>JUDUL></b> : <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><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>

Keterangan:
  • Warna merah yang ada dapat diganti sesuai dengan keinginan
  • "isi spoiler" dapat di ganti dengan text, gambar, musik, atau video
  • Untuk musik dan video yang dimasukan adalah embed kode
  • Apa bila spoiler berupa gambar maka di upload terlebih dahulu lalu di ambil linknya di "edit HTML" atau mengambil link upload seperti di photobucket, bannerbreak dll seperti ini:
  • <a href="http://bunli.blogspot.com"><img border”0” width="200" src="http://bannerbreak.com/banners/2/403/123030631272792456.gif" height="50"/></a>
  • dan hasilnya seperti ini:
  • Banner :



    Semoga artikel ini dapat menjawab pertanyaan yang telah diajukan.selamat mencoba^^
Sumber: http://www.tips-fb.com , http://pandu-an.blogspot.com

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Articles



11 comments: on "Cara Membuat Spoiler pada Posting Blog"

Yoga Adhi Pradana mengatakan...

thanks . . .
infonya mdah dimengerti plus simple . . .
mksh cuy . . .

bunli mengatakan...

Thanks juga uda mampir^^

anak nelayan mengatakan...

makasih gan tak pakek dologan

Nisita Laxmi mengatakan...

wah sangat membantu.....
terima kasih

Neody mengatakan...

wah sangat berguna untuk seorang blogger nyubi seperti saya

A-Gan mengatakan...

Akhirnya yang dicari-cari ketemu juga... Makasih bos

http://ratryabloggercute.blogspot.com mengatakan...

Thanks lho infonya...
Saya ingin bertanya kepada teman saya bagaimana caranya spoiler, saya tidak mau merepotkan. Akhirnya saya melakukan searching di google, dan mendapatkan blog ini.. Terimakasih!

Anonim mengatakan...

Thx ya infonya
Mudah dimengerti dan sangat jelas.

~ace~ mengatakan...

ada yang lebih simple g codenya...

sang dwiwarna mengatakan...

udah dicoba
dah bisa
thx ya

Posting Komentar