Cara Membuat Spoiler Pada Blog

Saya Akan Membahas tentang Spoiler. Mungkin Sebagian para Blog Mania sudah tau apa itu Spoiler.. Walaupun Begitu.. kan sebagaian yang tau.. hehe.. neh sebagian lagi yang gak tau akan saya beri tahu disini.
Baiklah..
Kita Mulai Membahas tentang Spoiler.. Apa Itu Spoiler ..? mungkin akan begitu Pertanyaa mereka yang Belum mengerti.
Spoiler adalah satu Script yang Dapat Menyembunyikan Sebagian Tulisan (Postingan) Anda. Menyembunyikan bukan berarti tidak bisa terlihat..
sifat dari spoiler ini sendiri adalah.. menyimpan sebagian tulisan anda dengan cara Buka dan Lipat. maksudnya jika anda lipat maka tulisan anda tidak akan terlihat.. dan untuk memperlihatkannya kembali anda tinggal klik maka akan terbuka..
Kegunaannya ialah untuk mempersingkat apabila tulisan anda sangat panjang..dan ini akan mengirit ruangan dalam Blog postingan anda.
Baiklah akan saya beri contoh sebagai berikut :

Buka[Selanjutnya]

Nah.. Seperti contoh di atas.. jika anda mengklik "Buka [Selanjutnya" maka Postingan yang anda sembunyikan akan terlihat.

Sekarang Bagai mana cara membuatnya..

Pertama Siapkan Tulisan anda..
sesuaikan Banyaknya teks yang akan anda perlihatkan di blog anda.. dan sisa tulisan yang akan anda sembunyikan..

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul atau isi konten </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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;">

Isi dari spoiler atau Konten anda
</div></div></div></div>


Perhatikan Teks Yang berwarna..

*warna Biru adalah Judul yang akan anda buat..
*warna Merah adalah Isi dari tulisan yang akan anda sembunyikan.

Setelah selesai.. SAVE dan sekarang Lihat hasilnya..
Kalau Sudah Berhasil.. Jangan Lupa ya Beri sedikit Commentnya.. :)

Read More