Tampilkan postingan dengan label Spoiler. Tampilkan semua postingan
Tampilkan postingan dengan label Spoiler. Tampilkan semua postingan

9.28.2010

Ascii Art

Setelah menulis tentang seni ascii yang lalu, saya ingin melakukan update kecil, tools online yang saya berikan pada tutorial di sini sudah tidak berfungsi lagi, mungkin karena sedang maintenance kali yah?

Berikut adalah tools altenatif bila anda ingin mengkreasikan diri dalam dunia ascii art :

1.09.2010

Mengubah Teks Menjadi Spoiler

Oke kawan...yang terakhir adalah teks yang di rubah menjadi spoiler berikut kodenya yaaaaaaaaaaaaaaaa :
<div id="aditya"><div><div id="show" style="display: none;"></div><div id="aditya"><div><p style="width:100px; color:#00FF00;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide aditya!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show aditya!'; }">Teks yang akan di jadikan spoiler</p><div id="show" style="display: none; color:red;">TEKS DAN GAMBAR YANG INGIN DI TAMPILKAN</div></div></div></div></div>
Contoh:

Kalo Aditya Cakep Klik Di SINI(hehe)

Keterangan Vital :
color:#00FF00 adalah warna teks yang akan di jadikan spoiler
color: red adalah warna teks ISI dari spoiler
(mudeng ga? di coba aja yoooooo.......)

Kelemahan spoiler ini adalah baik form/teks/gambar tidak bisa di sisipkan kedalam paragraf jadi butuh spasi baru untuk meletakan spoiler tersebut, saya akan coba ngutak-ngatik lagi n cari-cari tutorial lagi untuk di modifikasi agar form/teks/gambar bisa di sisipkan kedalam paragraf dan isi dari spoiler bisa melayang di atas paragraf, tanpa mengganggu tulisan lainya (bingunggggggg??????????) tunggu aja deh....sementara pake yang ini aja lagian kan kebanyakan spoiler versi ini yang di pakai oleh para blogger ya toh?
Tak tunggu komentarnya n saranya bila ada yang salah ya.....yang jelas scritpt-script spoiler ini berfungsi kok kan udah tak kasih contohnya toh ? seperti biasa klo ada yang mau kopas untuk konten blognya....jangan lupa sertakan sumbernya ya.......trims bgt.

Membuat gambar menjadi spoiler

Nah yang ini adalah trik spoiler hasil formulasi sederhana saya, yaitu gambar yang bisa di ubah menjadi spoiler,cara ini sangat cocok untuk blog yang berisikan artikel dengan topik utama gambar sehingga tidak terlalu panjang memberikan penjelasan tentang gambar yang bersangkutan, tinggal memberi keterangan "klik pada gambar" langsung sreeeeetttttttt....penjelasan tentang gambar tersebut akan muncul. Sehingga bisa menghemat space.
<div id="aditya"><div><div id="show" color="black" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="aditya"><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_wEaDVY8ApWKOe1G11FX9Ep62xCpX5K8g662Q1sXT-tXoqVVwfCcNF6jV5v5hxPl5Jx9sdKA0E1Gmjf_BieFCQXokZZmTepITVYqxeEcu7gXwCIZYGPbo_pheE9CXKlc7w4VS6GRIGOp/s576/mas%20adit.jpg" style="margin: 10px; padding: 0px; width: 100px; height: 100px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide aditya!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show aditya!'; }"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">TEKS daN GAMBAR YANG INGIN DI TAMPILKAN</div></div></div></div></div>
Contoh :

Keterangan vital :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_wEaDVY8ApWKOe1G11FX9Ep62xCpX5K8g662Q1sXT-tXoqVVwfCcNF6jV5v5hxPl5Jx9sdKA0E1Gmjf_BieFCQXokZZmTepITVYqxeEcu7gXwCIZYGPbo_pheE9CXKlc7w4VS6GRIGOp/s576/mas%20adit.jpg ganti dengan URL gambar
width: 100px; height: 100px; adalah ukuran gambar, bila anda ingin gambar muncul sebesar aslinya cukup di hapus bagian ini.

Untuk lebih jelasnya baca artikel spoiler saya sebelumnya, lihat di related category. oh ya bergua ga berguna di komen ya pren........
Term Of Use : Tutorial berciri khas mohon tidak kopas untuk konten blog anda, bila itu terjadi...mohon sertakan sumbernya...trims.

Membuat Form Spoiler

Berikut ini adalah cara untuk membuat spoiler kedalam tulisan posting kita, tentu saja sudah saya modifikasi sedemikian rupa tanpa merusak fungsi sehingga saya tidak maen kopas tutorial orang lain yang udah susah payah di buat sang owner blog nya:
<div id="aditya"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="aditya"><div><input value="Leave a comment here" style="margin: 10px; padding: 0px; width: 200px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide aditya!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show aditya!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">TEKS DAN GAMBAR YANG INGIN DI TAMPILKAN</div></div></div></div></div>


Contoh:


Ket :
Leave a comment here adalah kata yang nantiya akan muncul pada tombol sehingga bisa memberikan petunjuk pada pembaca
color:black adalah warna tulisan dalam spoiler (sesuaikan dengan background default template agar bisa di baca) bila yang ingin di sembunyikan lewat spoiler adalah gambar maka bagian ini tidak perlu di rubah
Teks dan gambar yang ingin di tampilkan adalah posisi objek yang ga perlu di jelaskan lagi,oh ya ada tiga tipe spoiler yang saya postingkan sekaligus silahkan di pelajari semua. Selamat mencoba.

NB : Seperti biasa ini tutorial dengan script ber ciri khas...jadi plagiat akan segera ketahuan hehehehe,dan klo udah baca n make...jangan lupa komen yah....apa sih susahnya ngetik satu dua huruf untuk komentar?ya toh?