Site Sponsor

Pages

2012-05-26

Membuat Teks Spoiler

Dalam membangun sebuah blog atau website terdapat berbagai element yang menyusun didalamnya. Elemen disini mulai dari header, outher, sidebar, dan footer. Penataanya juga perlu diperhatikan agar terlihat nyaman untuk dilihat dan yang jelas mudah untuk ditemukan oleh search engine. Dalam post kali ini ane ga pengen bahas bagian-bagian halaman itu. Ane cuman ingin berbagi info tentang bagamana membuat tampilan posting sedikit lebih indah, hehehe...

Ane ingin berbagi info tentang penggunaan spoiler. Spoiler digunakan untuk menyembunyikan postingan agar tidak terlihat secara langsung, namun masih tetap dapat dibuka dan dilihat. Bukan untuk menghiden post, melainkan agar tersembunyi aja. Hal ini dilakukan agar meringankan saat membuka sebuah halaman blog atau website. Selain itu juga dapat digunakan untuk merapikan sebuah postingan sehingga postingan nampak tersusun rapi dan sistematis.

Ini contoh spoiler yang ane maksut gan




Baiklah, langsung aja saya kasih scrip spoilernya


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</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;">

isi spoiler

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


=======================================================
Catatan :
Ganti tulisan Judul (warna merah) pada script sesuai dengan tulisan yang agan inginkan
Juga Isi spoiler (warna biru) sesuai isi dari apa yang ingin agan postingkan.

1 komentar:

  1. terima kasih atas informasi yang bermanfaat ini, hampir satu jam saya ada disini maklum disini banyak info yang menarik, nanti bila ada waktu saya akan kembali mengunjungi blog anda lagi :D



    #Semoga Sehat Selalu :)

    BalasHapus

Followers

Cari Blog Ini