qwerty

Senin, 25 Juli 2011

cara membuat SPOILER pada blogspot


         Spoiler...  Bagi Anda yang gemar mengikuti Forum, tentu sudah tidak Asing lagi mendengarnya.  Jujur saja, Saya sendiri tidak tahu pasti arti sesungguh nya mengenai Spoiler. ^_^ Yang jelas, Setelah Anda melihat gambar di bawah ini pasti anda akan tahu apa yang di maksud Spoiler.

          Sebelum Anda melihat Screenshoot atau tampilan Spoiler, akan Saya jelaskan sedikit apa itu Spoiler. Spoiler digunakan apabila Anda ingin menyembunyikan text, gambar atau video. Materi tersebut baru akan muncul ketika kita menekan tombol "show". Spoiler berguna jika kita menginginkan ada bagian dari post kita yang tidak ingin ditampilkan begitu saja, misalnya spoiler film (bocoran cerita), terkadang orang-orang tidak ingin tahu bagaimana jalan cerita suatu film, maka sebaiknya kita menuliskan jalan cerita tersebut dalam kotak spoiler agar hanya orang yang benar-benar ingin tahu saja yang membukanya. Oke, 
<div>

<div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;">

<i><span style="font-weight: bold;">Judul//*Yang perlu di edit ke 1*//</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="font-size: 10px; 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 //*Yang perlu di edit ke 2*//</div></div></div></div>
 
 
  Jika Anda perhatikan, sederhasa sekali Script di atas. Anda tidak perlu melakukan pengeditan yang berarti. Hanya 2 Hal yang perlu di edit. Yang pertama Judul Spoiler dan Yang kedua Isi Spoiler. Di dalam Spoiler yang Saya gunakan sebagai contoh, Saya menggunakan Sebuah gambar sebagai isi. Sehingga tulisan Isi Spoiler dalam script hanya perlu di ganti menjadi :
<img border="0" src="http://alamat gambar anada" />
Dengan cacatatan isi dengan Link gambar milik Anda sendiri. Bagaimana mudah bukan membuat Spoiler pada blogger? Semoga tutorial ini dapat bermanfaat bagi Anda yang mebutuhkan. Sekian Postingan tentang Tutorial mebuat Spoiler pada Blogger ini. 
^_^

Tidak ada komentar:

Posting Komentar

How To Create Horizontal Accordion Slideshow