handapeunpost



Senin, 12 Desember 2011

0 Membuat Spoiler Blog

 Membuat Spoiler di Blog - Layaknya sebuah spoileryang sering digunakan di dalam sebuah forum, spoiler blog juga sangat dibutuhkan dalam dunia blogging. Dengan membuat spoiler, pemilik blog akan lebih mudah untuk menghemat tempat/area di blog karena konten yang dibuat si pemilik blog yang bisa memakan tempat dapat disembunyikan (gambar, kode, dll). selain itu, membuat spoiler di blog juga ditujukan untuk mengurangi berat blog saat proses loading sebab konten yang ukurannya besar tidak akan ikut di load dan hanya akan tampil setelah tombolspoiler tersebut di klik.

Seperti apa sih spoiler itu ?

coba liat tampilan spoiler di bawah ini :
<div>
<div style="margin-bottom: 5px;">
<div class="smallfont" style="margin: 2px;">
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 12px;" 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: 5px; padding: 1px;">
<div style="display: none;">

Isi Spoiler . . .

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

Isi Spoiler . . .






Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo sobat blogger mau memasukkan kode HTML, sobat blogger harus parse dulu kode HTML tersebut agar kodenya tidak langsung bekerja. Buat parse kode HTML bisa diliat Disini
Untuk gambar, cukup ganti tulisan yang berwarna hijau dengan kode <img src="url gambar"> (kode HTML untuk memanggil gambar).


Secara umum kode untuk membuat spoiler di blog sama seperti kode di atas, tapi sobat blogger bisa sedikit modifikasi sehingga hasilnya nanti bisa sesua keinginan

Sumber : Cirebon-Cyber4rt

0 komentar:

Posting Komentar

-Terima Kasih atas Kunjungannya di Artikel saya ini :)

Note : Dilarang SPAM , Berkata Jorok
Jika Coment Seperti itu akan saya hapus :)

Sekian Terimakasih :)

http://tutorialfree4u.blogspot.com/

Global Variables

allowfullscreen="" src="http://www.youtube.com/embed/evNs1gTMptI?feature=player_embedded" frameborder="0" height="360" width="400">