Tapi sebelum menginjak ke tutorialnya, yang saya ketahui setidaknya ada dua model spoiler, namun saya tidak akan membingungkan sobat untuk tipsnya, jadi saya hanya memberi satu model spoiler saja biar mudah mengingatnya.
Contoh spoiler seperti dibawah ini dengan gambar artis cantik yang lagi dirundung masalah akhir-akhir ini :
Cara membuatnya gampang kok, langsung saja copas scriptnya seperti dibawah ini :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">JUDUL</span></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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;">
<span style="color: rgb(255, 0, 0);">
ISI SPOILER
</span>
</div></div></div></div>
Keterangan :
- Ganti kata yang tercetak merah sesuai yang diinginkan.
- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.
- Jika gambar terlalu besar, sebelum diupload kecilkan dulu size-nya dengan photoshop. Usahakan lebarnya tak lebih dari 10 cm atau sudah ada penyesuaian gambar pada situs uploader tinypic.com atau pun photobucket.com, jadi Anda perlu menyesuaikan besar kecilnya gambar sesuai dengan selera Anda.
Mudah khan? dicoba aja Sob ...
sumber : wawanwae.blogspot.com
Tidak ada komentar:
Posting Komentar