Kamis, 15 November 2012

spoiler untuk blog

bagi anda yang sedang bingung membuat tampilan blog anda lebih simpel, mungkin cara ini bisa membantu anda. kadang terjadi gambar yang kita posting terlalu bessar sehingga mengganggu pemandangan secara langsung dan kadang scrol layar jadi lebih jauh. 
anda bisa menggunakan SPOILER. lho? kan ini bukan kaskus gan?? gmn bisa?? jawabannya ya bisa, emang gak sesimpel kaskus yang tinggal klik untuk buat spoiler. di sini kita membutukhan yang namanya script.
lagsung aja:

-langkah pertama kita masuk  HTML saat mau posting lalu masukkan sript berikut:

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>cript spoiler</b></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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" 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>


=> ganti tulisan yang berwarna merah dengan yang kmu mau.. 
Contoh spoiler teks:
Isi Spoiler
=> nah beda lagai klo mau pake gambar
scripnya gini

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhmMGDX5N6wH-SfzrtTypKN-PyBt1bNAX162ZcyIX9cyve3QzGwxyOGIdI94mfWEmW3B0a0E7wYorkPIxjj1jGnt9CoXPbNEK7Wmhv-Y0hBIcWxqUgjLwXwncGzhfTV4z80rWhF2YBww/s1600/aspire3.jpg" />
</div>
</div></div></div>
Contoh spoiler gambar:
=> ganti teks hijau dengan alamat gambar yang kmu mau. cara gampangnya carai di mbah google, ada gambar trus di klik kanan, view image, nah di address bar copy dah tu alamat. trus di paste gantiin teks warna hijau tadi.

gampang kan gan??
di tunggu komennya ya??? :) :)

Tidak ada komentar:

Posting Komentar