.

ALAN MAGIC
SEMUA ADA DI SINI SOFTWERE ,GAME,TOTORIAL BLOGER,BISNIS ONLINE.DLL

Monday, 21 March 2011

Cara untuk membuat spoiler


kali ini saya akan memberitahu cara untuk membuat spoiler pada postingan kalian, mungkin sebagian dari kalian sudah ada yang tahu apakah itu spoiler, tetapi saya akan memberitahu untuk yang belum tahu apa yang dimaksud spoiler, spoiler adalah sebuah kolom yang bisa dibuka/ditutup dan mempunyai border atau garis yang membentuk kolom tersebut.
fungsi spoiler sama seperti fungsi scroll yang bertujuan untuk menghemat ruang halaman saat memposting gambar yang banyak atau tulisan yang panjang, tapi spoiler lebih unik dari pada scroll.
langsung saja kalian bisa melihat bentuk dari spoiler itu sendiri dan keterangannya.
dibawah ini yang saya maksud dengan spoiler

test...test...1..2..3..tes.....spoiler.....!!!!!!
hahahaha......

pada kolom ini anda bisa memasukan gambar,tulisan,script,ataupun suntingan teks yang sangant panjang. dan efek dari kode html pun bisa dibuat pada kolom ini, jadi jika kalian ingin memasukan sebuah kode html atau script lainnya sebaiknya kalian pharse terlebih dahulu kode html tersebut agar tidak menjadi efek di kolom ini.



Spoiler:











apakah kalian tertarik untuk membuat spoiler seperti itu???
spoiler ini bisa diletakan pada posting atau bisa juga diletakkan di sidebar, header atau footer blog.
copy dan paste script dibawah ini untuk membuat spoiler, sebagai contoh copy dan paste kan pada saat anda memposting sebuah artike.


script Spoiler:





<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


Letakkan kode script, HTML dan teks anda disini



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









Keterangan :

1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan kalian.
5. Tulisan yang berwarna merah dapat kalian ganti sesuai dengan tulisan yang ingin kalian tuliskan pada kolom bagian dalam spoiler

selamat mencoba dan sukses slalu.

No comments:

Post a Comment

SEDIKIT KOMENTAR SANGAT BERARTI BAGI KEMAJUAN BLOG INI