Browse » Home » Archives for Agustus 2012

Tutorial Membuat Template Blog Dengan Artisteer 3.1

08.44 killer

Baru-baru ini saya searching cara membuat template blog dengan software artisteer 3.1, dan ternyata pencarian saya itu tidak cukup memuasakan saya sobat blogger. Mungkin saja karena saya belum maksimal dalam melakukan pencarian tentang itu. Tetapi terlintas dalam benak saya " ya sudahlah mendingan saya download softwarenya dulu sendiri saja dan setelah itu pelajari sendiri cara membuat template blognya ". Akhirnya ketemu link downloadnya. Ya Alhamdulillah ya sobat jadi gak perlu beli hehehe, maklum orang miskin. Akhirnya saya jadi tau cara membuat template dengan software artisteer ini.
Nah di sini saya akan berbagi info dan pengetahuan saya yang sedikit ini kepada sobat blogger semua. Ya siapa tau saja ada yang bermanfaat bagi sobat blogger semuanya. Gak usah khawatir sobat blogger. Ternyata cukup mudah kok sobat blogger cara memakai software ini untuk membuat template sesuai keinginan sobat. Yang penting sabar, teliti dan yang pasti kreatif sobat. Sobat blogger tinggal ikuti saja langkah-langkah berikut ini sobat :

1. Download software artisteer 3.1 di sini atau di sini nya atau kalau punya uang beli sekalian sobat ya agar bisa mendapatkan yang full version.

2. Setelah itu yang pasti diinstal kan software itu.

3. Nah kalau sudah buka softwarenya dan akan muncul seperti gambar dibawah ini ( Tentu sebelumnya sudah full version dulu ya sofwarenya sobat agar lebih enak ngeditnya ).

4. Nah untuk blogspot pilihlah logo blogger seperti gambar di atas.

5. Kemudian sobat tinggal pilih contoh rancangan tempate dengan mengeklik gambar lampu berwarna orange di samping kiri atas, seperti gambar di bawah ini.

6. Nah pastinya akan muncul rancangan-rancangan template yang sangat menarik sobat.

7. Pilih salah satu yang sobat suka dan edit semau apa template yang diinginkan sobat. Contohnya dengan mengeklik salah satu gambar lampu seperti di bawah ini untuk mengganti header.

8. Nah jika sudah selesai dalam mengedit template sesuai keinginan sobat. Sekarang tinggal diterapkan di blog sobat. Yaitu dengan cara mengeklik tombol Publish Template To Blogger.com ( Untuk Blogspot ). Atau seperti gambar di bawah ini.

9. Nah setelah diklik pasti akan muncul gambar seperti ini sobat.

10. Kemudian isikan user name dan password email sobat dengan benar dan klik publish seperti gambar di ats sobat. Dan untuk pengisian blog akan keluar dengan sendirinya jika user name dan password email telah diisi dengan benar.

11. Tunggu sebentar karena sincronisasi ke blog sobat sedang dalam proses.

12. Jika sudah selesai maka akan muncul gambar seperti ini.

13. Copy script template tersebut dan klik continue. Maka akan masuk ke halaman edit html template tampilan lama seperti ini.

14. Hapus semua code di dalamnya dan kemudian paste dan simpan template sobat.

15. Dan lihat hasil karyamu sendiri sobat.

Semoga berhasil dan sukses ya. Kalau ada pertanyaan jangan lupa tanya ya di komentar saya.

[Read More...]

Software gratis editor css

08.33 killer

Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat. Berikut beberapa software gratis yang bisa kita gunakan untuk itu.

Simple CSS

Simple CSS Sangat mudah digunakan dengan visual yang lumayan lengkap. Aplikasi ini bisa dijalankan di sistem operasi windows dan mac. Download Simple CSS

TS Webeditor (tswebeditor)

Aplikasi ini mendukung 20 lebih bahasa pemrograman desktop seperti pascal, foxpro, java dan juga dapat digunakan untuk pemrograman web seperti HTML, PHP, javascript dll termasuk css. Dengan visual pewarnaan perintah sesuai bahasa pemrograman memberikan lebih kemudahan dan cukup ringan dijalankan dikomputer maupun laptop. Selain itu yang sangat membantu adalah fasilitas auto complete sehingga kita tidak perlu menuliskan kodes secara keseluruhan.
Untuk melihat fitur lengkapnya silahkan klik disini, dan untuk mendownload silahkan klik disini.

A Style CSS Editor

Yang ini juga bisa anda coba, memiliki fitur sederhana, ukuran file sangat kecil tapi sangat memudahkan dalam penulisan css. Untuk mendownloadnya silahkan klik disini.

TopStyle Lite

Yang ini juga recomended dilengkapi dengan pustaka css yang dapat mendeteksi kompatibel tidaknya kode css yang kita buat. Dilengkapi dengan auto complete dan pewarnaan perintah yang sangat jelas. Silahkan anda download disini.
Kembali ke anda sendiri tinggal pilih mana yang kira-kira membantu pekerjaan anda dalam membuat desain web dengan css.
Semoga bermanfaat

[Read More...]

Membuat tulisan berjalan dengan HTML

08.28 killer

Dalam perintah HTML sudah tersedia perintah untuk menggerakkan objek berupa tulisan atau gambar dengan perintah <marquee>TEXT</marque>.
Dengan perintah tersebut objek yang berada diantaranya secara otomatis akan bergerak dari kanan kekiri secara horizontal. Untuk beberapa keperluan kita bisa tambahkan beberapa atribut bawaan yang bisa disesuaikan. Atribut adalah opsi pilihan yang bisa kita tempelkan pada perintah utama marquee. Beberapa atribut tersebut yaitu :

direction : digunakan untuk mengubah arah pergerakan. Atribut ini bisa diberi nilai : up (bawah ke atas), down (atas ke bawah), left (dari kanan ke kiri), dan right (dari kiri ke kanan).
scrollamount : digunakan untuk mengatur lompatan karakter pada tiap gerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar nilainya berarti akan semakin besar jarak lompatan karakternya sehingga akan cepat sampai ke titik akhir.
scrolldelay : digunakan untuk mengatur cepatnya pergerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar berarti semakin cepat pergerakanya.

Perubahan kombinasi nilai scrollamount dan scrolldelay akan sangat berpengaruh terhadap keceatan dan halus tidaknya pergerakan objek. Jadi harus diatur agar dilihat bagus.
Berikut saya contohkan penggunaan :

<marquee scrollDelay="10" scrollamount="3" direction="right">Selamat datang di website saya</marquee>

Hasil tampilan kode diatas :
Selamat datang di website saya Kita bisa juga tambahkan opsi agar pergerakan objek bisa dikontrol oleh mouse, sehingga jika korsur mouse digerakkan diatasnya maka objek berhenti bergerak, dan jika dipindah maka bergerak kembali. Berikut contoh kodenya :

<marquee onmouseover='this.stop()' onmouseout='this.start()' direction="right" scrollDelay="10" scrollamount="3">Selamat datang di website saya</marquee>

Hasil dari kode diatas :
Selamat datang di website saya

Bedakan kode dan hasilnya dari kode sebelumnya, ada tambahan onmouseover='this.stop()' onmouseout='this.start()' yang mempengaruhi pergerakan jalan dan berhenti objek.
Kode HTML diatas bisa anda gunakan untuk menambah animasi pada halaman blog/website anda. Caranya copy kode diatas dan sisipkan dalam blok body halaman web anda.

Semoga bermanfaat

[Read More...]

Membuat form login dengan css

08.25 killer

Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form pendaftaran yang pasti isiannya cukup merepotkan. Sekarang saya akan berbagi tentang cara membuat form login dengan css.
Banyak variasi form login css yang bisa kita buat, baik nanti beda warna, posisi maupun ataupun gambar latarnya. Langkah pertama adalah membuat susunan kode form html ditempatkan dibagian dalam <body>...</bodu>, lihat kode berikut :

<div id="form-login">
<form id="FLogin" name="FLogin" method="post" action="">
<h1>Login Member</h1>
  <label>Username </label> : <input name="username" type="text" id="username" size="20" maxlength="20" class="txt" /><br />
  <label>Password </label> : <input name="password" type="password" id="password" size="20" maxlength="20" class="txt" />
  <div id="tombol"><input name="btnLogin" type="submit" value="Login" class="button" /><input name="btnLogin" type="reset" value="Reset" class="button" /></div>
</form>
</div>

kemudian kita buat kode css agar semua objek yang ada pada form disesuikan posisi serta pewarnaanya. letakkan css dalam file css yang sudah ada atau letakkan di bagian dalam <head>..</head>.

div#form-login {
width:400px; margin:0 auto;
padding:20px; background-color:#009900;
border-radius:15px; -moz-border-radius:15px; 
-webkit-border-radius:15px;border:1px solid #666;
text-align:center;font-size: small;
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
letter-spacing: .01em;
color:#009900;
}
div#form-login form { 
margin:0;padding:0;border-radius:15px; -moz-border-radius:15px; 
-webkit-border-radius:15px;border:1px solid #666;
background-color:#E7FCD8;
-webkit-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
-moz-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
}
div#form-login form label { float:left; width:120px;}
div#form-login form .txt { padding:3px;margin:3px;}
div#form-login h1 { font:20px "Trebuchet MS"; border-bottom:1px dotted #009900;padding:5px;margin:10px;}
div#tombol { clear:both;padding:10px;}
.button{ box-shadow: rgba(0,0,0,0.1) 0px 1px 1px;padding:3px 20px; }
.button:hover,.button:focus{
color: #000; -webkit-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px; 
-moz-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px; box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
}
</style>

Selesai, tinggal kita lihat hasilnya berikut..

Contoh langkah membuat form login dengan css diatas hanya tampilanya saja, untuk script php proses loginnya saya akan bahas berikut ini :

Membuat tabel mysql untuk login

Asumsi saya anda sudah memiliki sebuah database jadi tinggal menambahkan loginnya saja. Berikut ini rancangan susunan tabel untuk login :
Nama tabel : tb_pengguna
Field tabel :

username tipe varchar (20) primary key
password tipe varchar (255)
nama tipe varchar (30)
login_terakhir datetime

susunan query untuk membuat tabel pengguna

CREATE TABLE `db_datamhs`.`tb_pengguna` (
`username` VARCHAR( 20 ) NOT NULL ,
`password` VARCHAR( 255 ) NOT NULL ,
`nama` VARCHAR( 30 ) NOT NULL ,
`login_terakhir` DATETIME NOT NULL ,
PRIMARY KEY ( `username` )
) ENGINE = MYISAM ;

dan hasil view struktur tabelnya seperti gambar berikut :
view tabel pengguna pada phpmyadmin

Menyisipkan data awal pengguna

Kemudian untuk simulasi ini saya input data awal secara manual melalui phpmyadmin (nanti kalo sudah ada adminnya baru dibuatkan menu untuk mengelola pengguna). Menambahnya bisa langsung tekan menu insert pada bagian atas informasi tabel pada phpmyadmin, seperti gambar :
insert data tabel pengguna pada phpmyadmin

insert data tabel pengguna pada phpmyadmin

atau dengan susunan query :

INSERT INTO `db_datamhs`.`tb_pengguna` (
`username`,`password`,`nama`,`login_terakhir`
) VALUES ('admin', MD5( '12345' ) , 'Nama Admin', '2012-08-08 23:49:35');

Dalam tabel pengguna saya tambahkan user dengan password MD5(`12345`), ini maksudnya nanti password akan disimpan dalam mode algoritma sistem acak md5(Message-Digest algorithm 5) sehingga password tidak tersimpan dalam bentuk aslinya `12345' tapi dikodekan khusus dalam 128-bit.
Pada tabel juga saya tambahkan field login_terakhir yang nanti digunakan sebagai tempat mencatat tanggal dan jam login terakhir.
Setelah tabel selesai dan sudah ada 1 user ditambahkan kita buat proses loginnya.

Membuat script login dengan PHP

Pertama kita buat koneksi database dulu seperti berikut, jika sudah ada lewati :

<?php
    ob_start();
    session_start();
    $dbserver="localhost";
    $dbusername="root";
    $dbpassword="";
    $dbname="nama_database";
    mysql_connect($dbserver,$dbusername,$dbpassword) or die(mysql_error());
    mysql_select_db($dbname) or die (mysql_error());
?>

Pada bagian form <form id="FLogin" name="FLogin" method="post" action="">, sengaja action saya buat tanpa nilai, ini artinya form akan diproses pada file itu sendiri. Jadi proses login kita sisipkan pada halaman yang sama.
Koneksi sudah sekarang kita akan modif halaman loginnya dengan menambahkan kode berikut pada baris paling atas :
(Ingat jika anda sudah punya koneksi, jangan lupa tambahkan ob_start() dan session_start() agar sistem penyimpanan informasi login bisa bekerja pada semua halaman). Jika koneksi sudah ada lewati ini.

<?php
    include("koneksi.php");
?>

Kemudian tambahkan lagi pada bagian setelah <body> sebelum form tadi :

<?php
//Penangganan login jika form diisi
if(isset($_POST['username']) && isset($_POST['password']))
{
   //cek isian
   if(!empty($_POST['username']) && !empty($_POST['password']))
   {
     $username=htmlspecialchars(stripslashes($_POST['username']));
     $password=md5(htmlspecialchars(stripslashes($_POST['password'])));
     $myquery="select username,nama,DATE_FORMAT(login_terakhir, '%d-%m-%Y %H:%i:%s') as login_terakhir from tb_pengguna where username='$username' and password='$password' limit 1";
     $result=mysql_query($myquery) or die (mysql_error());
     if (mysql_num_rows($result) == 1) 
     {
 //jika username dan password cocok
 $pengguna=mysql_fetch_object($result);
 $_SESSION['login']=true;
 $_SESSION['username']=$pengguna->username;
 $_SESSION['nama']=$pengguna->nama;
 $_SESSION['login_terakhir']=$pengguna->login_terakhir;
        mysql_query("update tb_pengguna set login_terakhir=NOW() where username='$username' limit 1") or die("Gagal memperbaharui terakhir login");
 header("location:index.php"); //ini disesuaikan tujuan halaman setelah login berhasil
      } else {
 //jika username dan password tidak cocok
 echo "<h1 align=\"center\">Username atau password salah!</h1>";
      }
   } else {
      //jika form kosong munculkan pesan
      echo "<h1 align=\"center\">Isikan username dan password!</h1>";
    }
} 
?>

Setelah itu, pastikan semua halaman yang anda ingin proteksi dengan password sudah ditambahkan kode berikut pada setiap awal bagian atas halaman :

<?php

include("koneksi.php");
if(!isset($_SESSION['login'])) {
    header("location:login.php"); //ini diisi dengan nama file halaman login
}
?>

Kode diatas tujuannya adalah, memindah ke halaman login jika status login belum ada (belum login).

Semoga bermanfaat, jika ada pertanyaan silahkan kirimkan melalui komentar dibawah.

[Read More...]

Membuat Artikel Terkait Horizontal dengan Thumbnail

05.33 killer

Artikel Terkait Horizontal dengan Thumbnail - Sudah banyak blog yang membahas tentang Cara Membuat widget artikel terkait dan tentunya dengan membaca juduk artikel diatas pasti sudah sangat umum buat anda.
Tetapi ketika saya coba hampir semua tutorial diblog-blog lain widget artikel terkait tersebut akan berbentuk seperti artikel terkait punya blog ini di bawah.

Tetapi kali ini saya akan membahas Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Biar lebih jelas liat di bawah

Tenang saja sob, ini tidak menggunakan Widget otomatis seperti dari LinkWithin kok, karena setelah saya cek Widget artikel terkait LinkWithin tersebut ternyata Redirect terlebih dahulu dari situs LinkWithin sebelum di arahkan ke artikel kita lainnya, dan lebih gak enaknya lagi Link tersebut nempel di blog kita DOFOLLOW, pasti cukup berpengaruh pada blog.

Nah langsung ke topik utamanya aja deh Membuat Artikel Terkait Horizontal dengan Thumbnail
Disini kita hanya memerlukan sedikit langkah otak-atik HTML
1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

CATATAN : Kode diatas inilah yang mempengaruhi tampilan Artikel Terkait Horizontal dengan Thumbnail di blog anda, bisa anda ganti sesuai keinginan anda
Artikel Lainnya : Judul pada widget
var maxresults=6: Jumlah artikel yang di tampilkan

Demikian tutorial singkat saya tentang Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Semoga bermanfaat !!!

[Read More...]

Membuat Artikel Terkait Horizontal dengan Thumbnail

05.33 killer

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,

[Read More...]

Program Registrasi dan Log in e-mail Menggunakan Java Script

08.52 killer

Hallo! Nama gue Agung. Sebenernya gue baru banget tertarik sama yang namanya dunia programing, atau banyak orang bilang koding-kodingan. Jadi, kalo ada salah-salah di dalam blog gue ini, CMIIW!

Oke, di sini gue ngebuat sebuah program, di mana gue ngebuat program untuk registrasi dan log in sebuah email menggunakan bahasa Java. Program ini adalah bentuk kasar sebuah program registrasi dan log in email yang kalian ketahui.

Di bawah ini adalah program jadi gue :

import java.util.Scanner;

import java.util.Random;

public class Method_TUBES {

public static void main(String[] args) {
Scanner input = new Scanner(System.in);
Random X = new Random();
int x = 5;
String cpta = "";
String cekcapta = "";
System.out.println("Selamat datang di A-mail. Sebelum log in, silahkan registrasi di bawah ini.");
System.out.print("New e-mail (@amail) : ");
String NewUser = input.nextLine();
System.out.print("New password : ");
String pass = input.nextLine();
System.out.print("Re-type your password : ");
String RePass = input.nextLine();

for (int i = 0; i < x; i++) {
cpta = cpta + Integer.toString(X.nextInt(9));
}

System.out.println(cpta);
System.out.print("Masukan kode di atas : ");
cekcapta = input.next();
String user[] = new String[]{"agung.insani", "insani.agung", "rezka_aufar", "ivan.yustiawan", "iman23"};

if (validasi_user(user, NewUser) && validasi_password(pass, RePass) && cekcapta.equals(cpta)) {
System.out.println("Registrasi berhasil. E-mail anda " + NewUser + " dan Password anda " + RePass);
System.out.println("");
System.out.println("Silahkan log in di bawah ini.");
String h = input.nextLine();
System.out.print("E-mail (@amail) : ");
String logIn = input.nextLine();
System.out.println("");
System.out.print("Password : ");
String LogIn = input.nextLine();

for (int i = 0; i < 2; i++) {
if (Log_in(logIn, NewUser, LogIn, RePass)) {
System.out.println("Selamat datang di A-mail.");
break;
} else {
System.out.println("Error! E-mail dan password anda tidak sama.");
h = input.nextLine();
System.out.print("E-mail (@amail) : ");
logIn = input.nextLine();
System.out.println("");
System.out.print("Password : ");
LogIn = input.nextLine();
}
i--;
}

} else {
System.out.println("Error! Ada kesalahan dalam registrasi.");
}

}

public static boolean validasi_user(String user[], String NewUser) {
for (int i = 0; i < user.length; i++) {
if (user[i].equals(NewUser)) {
return false;
}
}
return true;
}

public static boolean validasi_password(String pass, String RePass) {
if (pass.equals(RePass)) {
return true;
}
return false;
}

public static boolean Log_in(String logIn, String NewUser, String LogIn, String RePass) {
if (logIn.equals(NewUser) && LogIn.equals(RePass)) {
return true;
}
return false;
}
}

Dan di bawah ini adalah hasil output-nya :

Oke itu dia program gue. Di situ jelas kan fungsi yang gue pake, antara lain Random, Scanner, If, For, dan Array. Nah di sini gue juga pake suatu variable di mana variable ini menggambarkan sebuah data base. Karena berhubung gue belom bisa bikin data base. Jadi, nama yang ada di variable itu, tidak bisa dibuat untuk akun yang baru. Buat cara kerjanya, program ini sama dengan kaya lo registrasi da log in email seperti biasanya.

Cukup itu aja yang bisa gue share, semoga ada manfaatnya buat kalian yang udah baca.
Terima kasih banyak.

[Read More...]

Program Registrasi dan Log in e-mail Menggunakan Java Script

08.51 killer

Hallo! Nama gue Agung. Sebenernya gue baru banget tertarik sama yang namanya dunia programing, atau banyak orang bilang koding-kodingan. Jadi, kalo ada salah-salah di dalam blog gue ini, CMIIW!

[Read More...]

Membuat Form Registrasi Menggunakan HTML 5 dan CSS3

08.21 killer

Seperti kita ketahui bersama HTML 5 memberikan kita kemudahan tampilan baik, dan saat ini penulis coba memberikan salah satunya, seperti yang coba penulis buat adalah membuat form registrasi dengan html 5 dan css3 yang biasanya form yang yang satu ini biasa menggunakan javascripts tapi untuk kali ini penulis coba membuat variasi berbeda.

Berikut ini tampilan dari form tersebut :

HTML

<form action="" method="post">
   <div id='name' class='outerDiv'>
	<label for="name">Full name:</label>
	<input type="text" name="name" required  />
	<div class='message' id='nameDiv'> Enter your 
        first and last name. </div>
   </div>
   <div id='username' class='outerDiv'>
	<label for="number">Username:</label>
	<input type="text" name="username" required  />
	<div class='message' id='usernameDiv'> Pick a 
         unique name on Twitter. </div>
   </div>
   <div id='password' class='outerDiv'>
	<label for="password">Password:</label>
	<input type="password" name="password" required />
	<div class='message' id='websiteDiv'>6 characters 
        or more (be tricky!).</div>
   </div>
   <div id='email' class='outerDiv'>
	<label for="email">Email:</label>
	<input type="email" name="email" required />
	<div class='message' id='emailDiv'> We'll send 
         you a confirmation.</div>
   </div>
   <div id='submit' class='outerDiv'>
        <input type="submit" value="Create my account" />
   </div>
 </form>

CSS

#twitter input:not(:focus){
	opacity:0.6;
}

#twitter  input:required{
}

#twitter  input:valid {
	opacity:0.8;
}		

#twitter input:focus:invalid{
	border:1px solid red;
	background-color:#FFEFF0;
}

Berikut ini untuk mengdownload versi lengkap program tersebut disini dan penulis ingin mengucapkan ke nikesh.me atas informasi penting ini

[Read More...]