Kumpulan Script Untuk Desain Blog

Ada beberapa script yang lumayan dapat menunjang berdirinya blog dengan menempatkan script tertentu untuk keperluan desain Blog dan tak kalah pentingnya dengan Widget itu sendiri.Karena pada dasarnya Blog/ Web adalah merupakan kumpulan Script yang terangkai sehingga membentuk satu kesatuan yang utuh hingga terbentuk yang namanya Blog, Wordpress, Multiply dan lain-lain.

Berikut ini adalah Scriptnya :



1. Button

    a. Scipt 1

        Kode :  

<button>Hallo Dunia</button>

      

        Hasil :

     b. Script 2

          Kode :

<form action="">
<input type="button" value="Hello world!">
</form>

          Hasil :

2.Text Fields / Area Input

    Kode :

<form action="">
Nama depan: <input type="text" name="Nama depan"><br>
Nama belakang: <input type="text" name="Nama belakang">
</form>

<p><b>Catatan:</b> Form tidak tampak. Juga default karakter max. 20 karakter.</p>

    Hasil :

Nama depan: 
Nama belakang: 

Catatan: Form tidak tampak. Juga default karakter max. 20 karakter.

3. Password Area

    Kode :

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>Note:</b> Karakter yang ditampilkan tertutup dan tampil *  atau bentuk lain.</p>

     Hasil :

Username: 
Password: 

Note: Karakter yang ditampilkan tertutup dan tampil *,. atau bentuk lain.

4. Checkbox / kotak centang

    Kode :

<form action="">

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car 

</form>

    Hasil :

I have a bike

I have a car

5. Radio Button/ Centang Bulat

Kode :

<form action="">

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

<p><b>Note:</b> Ketika Tombol Radio di cek maka akan ter-Cek, artinya semua yang berhubungan dengan yang di cek jadi terikat.</p>

Hasil :

Male

Female

Note: Ketika Tombol Radio di cek maka akan ter-Cek, artinya semua yang berhubungan dengan yang di cek jadi terikat.

6. Simple Drop Down Menu

Kode :

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

Hasil :

 Volvo Saab Fiat Audi 

7. Border/ Pembatas sekitar Data

Kode :

<form action="">

<fieldset>

<legend>Data Pribadi:</legend>

Nama: <input type="text" size="30"><br>

E-mail: <input type="text" size="30"><br>

Tangga lahir: <input type="text" size="10">

</fieldset>

</form>

Hasil :

Personal information:

Name: 
E-mail: 
Date of birth: 

8. Send email form

Kode :

<h3>Kirim e-mail ke seseorang@contoh.com:</h3> 

<form action="MAILTO:seseorang@contoh.com" method="post" enctype="text/plain">

Name:<br>

<input type="text" name="nama" value="Nama anda"><br>

E-mail:<br>

<input type="text" name="email" value="Alamat email"><br>

Comment:<br>

<input type="text" name="Comment" value="Komentar anda" size="50"><br><br>

<input type="submit" value="Kirim">

<input type="reset" value="Batalkan">

</form>

Hasil :

Kirim e-mail ke seseorang@contoh.com:

Name:

E-mail:

Comment:


 

9. Audio Control

Kode :

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Hasil :

10. Video Control

Kode :

<button onclick="getAudioTracks()" type="button">Cari Audio Track yang tersedia</button>
<br>
<video id="video1" controls="controls">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
myVid=document.getElementById("video1");
function getAudioTracks()
  {
  alert(myVid.audioTracks.length);
  }
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

Hasil :

    Video courtesy of Big Buck Bunny. .......Capek juga yach, mungkin kali ini cukup dulu, Insya Allah di lanjut share ilmunya. Semoga bermanfaat.
Sumber : copas box