Cara Membuat Spoiler di Blog

Spoiler sering kita jumpai jika sobat sering berkunjung di situs forum seperti kaskus. Spoiler berguna untuk memaksimalkan ruang postingan jika terdapat tulisan, foto, link yang banyak agar tidak memnuhi tempat.

sebenernya fungsinya hampir sama dengan textarea namun spoiler memilik fitur buka tutup. Dari pada penasaran baiknya kita langsung praktekan saja dibawah ini, sebelumnya berikut contoh Spoiler :

Contoh:

Contoh Spoiler

Caranya :

1. Login ke blog
2. Buat Entri Baru/New Post
3. Pilih mode penulisan HTML
4. paste script dibawah ini dalam posting dalam mode HTML

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">judul spoiler:
<input value="BUKA"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 = 'Tutup'; } else { this.parentNode
.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]
.style.display = 'none'; this.innerText = ''; this.value = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">masukan gambar atau text yang akan di buat spoiler disini<br>
</div>
</div>
</div>

Atau

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show again'; }" name="button" type="button" value="Show" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
</div><div id="hide"></div></div></div>

3. Publish post

Mudah bukan??
Sekian postingan dari saya, semoga bermanfaat...

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

About Bagas Abi W

Salah satu manusia remaja asal jogja yang sedang belajar untuk menulis blog. Suka dengan teknologi, olahraga, dan suka hal yang simpel.