Laman

30/07/10

Koleksi Script HTML


Koleksi Script HTML
sengaja saya kumpul kan disini untuk keperluan saya sendiri dan buat teman teman yang baru membuat blog, dan belum tau cara membuat seperti klik disini dan sebagai nya. yang pertama saya ingin membuat contoh link klik disini berikut kode nya

<a href="http://www.ndolem.com">klik disini</a>

kalau anda memakai kode berikut jika di klik akan membuka window baru

<a href="http://www.ndolem.blogspot.com" target="new">klik di sini</a>

Teks warna merah ganti dengan link Sobat, teks warna hijau (klik disini) ganti teks terserah sobat. klik di sana juga bisa

membuat gambar menjadi sebuah link, berikut kode nya:

<a href="http://www.ndolem.blogspot.com/"><img src="http://i780.photobucket.com/albums/yy87/ndolem/ndolem.gif"/></a>


maka akan tampil seperti ini


teks warna biru ganti link gambar anda, kalau masih bingung silahkan lihat Cara Daftar dan upload Di photobucket

Membuat teks berjalan, ini kode nya

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

berjalan dari kanan ke kiri

</MARQUEE>

Maka akan tampil seperti di bawah ini:



berjalan dari kanan ke kiri


Contoh marquee dari perilaku gerakan, copy kode d bawah ini:

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

ganti teks ini

</MARQUEE>

Maka akan tampil seperti di bawah ini:


ganti teks ini



Kotak Tabel
<table border="1"><tr><td>Nama ></td></tr></table>

Hasilnya:
Nama >


<table border="1" width="300">
<tr><td>Nama Sahabat</td><td>Hoby</td></tr>
</table>

Hasil nya:


Nama SahabatHoby


<table border="1" width="300">
<tr bg#3366ff">#E0F8E0">
<td align="center">
<b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td>
</tr><tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
</table>

Hasil nya:


Nama
KelasHobby
A6Makan bakso
A6Makan bakso
A6Makan bakso
A6Makan bakso



Membuat OPEN CLOSE berikut ini kode nya:

<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="OPEN" style="margin: 0px; padding: 5px; width: 30%; font-size: 11px; background: none repeat scroll 0% 0% BLUE; color: white;" 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"><div style="display: none;"><div style="color: white; text-align: justify; padding: 10px;">Isi dengan teks atau kode gambar dll disini</div>

Maka akan tampil seperti ini:



Atau SHOW HIDE seperti di bawah ini. berikut kode nya:

<div style="margin: 5px;"> <div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100%;" value="SHOW" 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 style="border: 1px inset; margin: 0px; padding: 6px; background: none repeat scroll 0% 0% rgb(255, 0, 0); -moz-background-inline-policy: continuous;" class="alt2"><div style="display: none;">
<a href="http://www.ndolem.com/" target="_blank">
teks atau gambar anda di sini</a>
</div>

Hasil nya seperti ini








Dan masih banyak lagi

Mungkin anda baca juga