- Home >
- Modifikasi Blog , Tutorial Blog >
- Cara Membuat Spoiler
Posted by :
Alwi Fauzi
Sunday, March 27, 2011
Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak terlalu memakan tempat. Sebenarnya anda juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.
Spoiler ini bisa anda letakkan di postingan, mungkin anda gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.
Kode Spoiler :
Lihat Kode Spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b> Lihat Kode Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan kode script, HTML dan teks anda disini
<br>
</div>
</div>
</div>
Keterangan :
1. Tulisan Lihat Kode Spoiler adalah judul, silahkan ganti sesuai keinginan anda.
2. Untuk tulisan Open dan Close bisa anda ganti sesuai keinginan.
3. Width : 55px untuk lebar Spoiler.
4. Font-size: 11px untuk besar tulisan pada kotak Spoiler.
