Saturday, 19 February 2011

Tips Blogger | Memasang Spoiler Di Blog

W

idget Spoiler adalah widget yang berfungsi untuk menyembunyikan tulisan atau gambar yang ingin dishare di dalam sebuah artikel postingan. Gambar atau tulisan baru akan muncul ketika pengunjung mengklik tombol yang ada pada spoiler tersebut.

Fitur spoiler biasanya banyak digunakan di website forum dan kini sudah bisa digunakan di Blogspot secara instan tanpa mengedit template Blog. Adapun kelebihan dari penggunaan widget spoiler adalah :

1). Load dari web atau Blog akan menjadi lebih ringan jika semua gambar diletakkan di dalam spoiler, karena pada saat load pertama gambar tidak akan ditampilkan sampai pengunjung sendiri yang akan melihatnya dengan mengklik tombol spoiler.
2). Akan lebih menghemat tempat ( space) di dalam halaman artikel kita.

Adapun pemasangan fitur spoiler di Blog sangatlah sederhana, tanpa perlu memodifikasi template Blog, cukup dengan menyisipkan saja kode-kode yang diperlukan di dalam artikel postingan.

Begini Caranya :

1). Untuk memunculkan spoiler sobat mesti menulis artikel lewat mode HTML bukan lewat mode Tulis yang biasa sobat lakukan, sobat boleh terlebih dahulu menulis dengan mode tulis biasa, namun setelah itu jika sobat ingin menyertakan spoiler sobat mesti pindah ke Mode HTML untuk menyisipkan kode-kode di bawah:

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





2). Lalu kembali ke mode Tulis, lihat dan coba dulu fitur spoilernya sebelum menerbitkan postingan!


Contoh Spoiler :


Spoiler










3). Selamat Mencoba!




Artikel Terkait:



Languages : English French German Spain Italian Dutch Russian Japanese Korean Arabic Chinese Simplified


24 komentar:

randy oktaran said...

ni saya kunjung balik :)

randy oktaran said...

bro follow balik ya

panduan seo bisnis online said...

terima kasih infonya.... lumayan buat mempercepat loading blog...

brian said...

thx infox

Obat herbal kanker payudara said...

keren juga nih informasinya, aku ijin ambil scrifnya nih, hehe,

Singapore web design said...

ma kasih ya...informasi yg cukup lengkap..

masterdani said...

oh gitu ya

iklan Gratis Tanpa Daftar said...

Wew,,,, spoliernya bisnis investasi,,, mantapp gan,,,

Iklan Baris said...

Mantapp nih tips spoillernya,,,,

Iklan Gratis said...

Sangat bermanfaat,,, thanks gan,,

des said...

o...gitu, tapi tentunya pengaruh ke tampilan ya. kalo gak di klik ga muncul.nyoba dulu lah

obat herbal nyeri sendi said...

thanks gan..
izin copas scrip..

Media Beladiri said...

Luar biasa artikelnya, banyak membantu juga

sepeda motor bebek injeksi kencang dan irit jupiter z1 said...

tipsnya bagus dan bermanfaat banget mas bro, thanks ya

obat kanker paru paru said...

salam kenal

Obat Rambut Rontok said...

salam sehat semuanya,

Obat Sakit Pinggang said...

hai,gan

Obat Diare said...

sukses selalu sobat

pengobatan diare said...

salam jumpa

pengobatan liver empedu said...

halo agan !!

pengobatan keputihan said...

apa kabar sobat??

pengobatan asam urat said...

sukses terus gan,

huruf timbul said...

nah ini dia yang lagi saya cari biar bisa buat spoiler di blog, kadang rada kesel kalo timbul masalah saat loading image yang keberatan mending pake spoiler aja, jadi tampilan pertama cuma huruf aja gambarnya di masukin spoiler semua

itupoker.com agen poker online terpercaya said...

bikin berat blog nggak gan?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment