Pasang iklan Anda di sini.
https://goo.gl/Io3Xqy

Friday, March 01, 2013

0 Membuat Spoiler di Blog


Membuat Spoiler di Blog - Layaknya sebuah spoiler yang sering digunakan di dalam sebuah forum, spoiler blog juga sangat diperlukan 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 boleh memakan tempat dapat disembunyikan (gambar, kode, dll). selain itu, membuat spoiler di blog juga ditujukan untuk mengurangkan berat blog saat proses loading sebab konten yang ukurannya besar tidak akan ikut di load dan hanya akan tampil setelah tombol spoiler tersebut di klik.

Seperti apa sih spoiler itu ?
Coba lihat tampilan spoiler di bawah ini :

Untuk membuat spoiler seperti di atas, maka kita cukup menggunakan kode dibawah 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>

Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo anda mau memasukkan kode HTML, anda harus parse dulu kode HTML tersebut agar kodenya tidak langsung bekerja. Buat parse kode HTML boleh di lihat 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 anda boleh sedikit ubah suai sehingga hasilnya nanti boleh sesuai keinginan.


0 komentar :

Post a Comment