SELAMAT DATANG DI BLOGGER CYBER DHARMA >

Senin, 17 Maret 2014

Kumpulan Script Untuk Desain Blog

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 :



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.

Tidak ada komentar:

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))