Jumat, 08 Juni 2012

Menyembunyikan Text Di Post Blogspot Dengan Spoiler

Kemaren saya berencara membuat blog tentang belajar mambaca untuk anak-anak http://d-anak.blogspot.com/. Dan alhamdulillah masih dalam pengerjaan :D. Saat pertama membuat saya berfikit alangkah baiknya jika text keterangan dibawah gambar disembunyikan saja.

Kalau anda sering mampir ke forum-forum seperti kaskus, vivanews atau yang lainya tentu sudah tak asing lagi dengan spoiler, kode untuk spoiler di forum biasanya seperti ini : [spoiler="Judul Spoler"]Isi Spoiler[/Spoiler] bahkan ada yang sudah menambahkan di menu post.

Pada umumnya spoiler di forum-forum tersebut digunakan untuk menghemat tempat karena gambar atau text yang terlalu banyak atau terlalu besar, selain itu bisa mempercepat tampilnya halaman karena tidak di load secara bersamaan.

Lalu bagaimana di blogspot???? ternyata caranya tidak sama dengan di forum. Agak banyak kodenya tapi bukan masalah bisa di copas kok :D

Berikut ini kode untuk menyembunyikan text saat posting di blogspot dengan menggunakan spoiler :


<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul Spoiler </span></i><input 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'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div>
</div>
</div>
</div>



Penerapanya yaitu pada saat posting copas code di atas, dan silahkan ganti text yang berwarna dengan judul dan ini spoiler.

Impementasi dari kode ditas seperti berikut :

Judul Spoiler



isi spoiler...




Ternyata tidak begitu sulit :D semoga tips sederhana ini bisa bermanfaat, amin

Tidak ada komentar:

Posting Komentar