Senin, 07 Maret 2011

Trik Memasang Spoiler Di Blog

 widget 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!

>> http://fuadliker.blogspot.com/

0 komentar:

Posting Komentar

PESAN SAYA..
Berkomentarlahh dengan baik..
Dukung dan Hargailah penulis blog ini..
Tinggalkan komentar anda..
Dan "INGAT BLOG SAYA BUKAN TEMPAT PROMOSII"..

Sering2 kunjungi blog saya.. Mksiih..
Catat..
Http://fuadliker.blogspot.com

Hati-hati dengan "EFEK SAMPING" dari gambar-gambar diblog ini, saya tidak bertanggung jawab :D

Popular Posts

 

Copyright © KOLEKSII PRIBADII FUAD EMPAT Design by O Pregador | Blogger Theme by Blogger Template de luxo | Powered by Blogger