Para penikmat, sekarang kita akan sama – sama belajar membuat sebuah halaman web bisa diganti-ganti themes nya dengan menunggukan framework javascript yang sangat handal, yaitu JQUERY. Tutorial ini terinspirasi dari my.yahoo.com saat dapat tugas membuat portal web internal tapi yang akan kita coba disini adalah mensimulasikan bagaimana jquery bisa menghandle style dari sebuah halaman.


Langkah 1.
Membuat Halaman Utama
Langkah awal kita buat terlebih dahulu layout dari homepagenya

HEADER


Biru |
Merah |
Hijau











Judul 1

Content



Detail

Content Kanan

Langkah 2. 
Membuat Css Standar
Setelah membuat layoutnya lalu buatlah style standarnya. Css Ini adalah css pertama kali ketika homepage di tampilan.

body {
    font-family:arial;
    font-size:11px;
}
 
h3, ul, h4 {
   padding:0px;
   margin:0px;
}
.head {
   width:800px;
   border:1px solid blue;
   height:100px;
   background:#315091;
}
.wrapper{
   width:800px;
   float:left;
   border:1px solid blue;
}
.leftPanel {
   float:left;
   width:200px;
   border:1px dotted blue;  
   margin:5px;
}
 
.leftPanel h3 {
   background:#929db5;
}
 
.rightPanel{
   float:left;
   width:550px;
   border:1px dotted blue;
   margin:5px;
}
 
.rightPanel h3 {
   background:#929db5;
}

Langkah 3.
Membuat Additonal Style Themes
Selanjutnya tambahkan style themes, disini kita akan coba membuat 3 themes, yaitu biru(default), merah, dan hijau. Nah sebelumnya, kita tentukan dulu DOM apa aja yang akan berubah nantinya, apakah header saja? ataukah panel kiri saja?ataukah semuanya?kali ini yang ingin kita ganti-ganti adalah :

border dan background Header -> .head
Border Panel kiri dan kanan -> .leftPanel,.rightPanel
background Title -> .leftPanel h3 dan .rightPanel h3

.merah .head{
    border:1px solid #d06c36;
    background:#d06c36;
}
.merah .leftPanel,.merah .rightPanel{
    border:1px dotted red;
}
.merah .leftPanel h3, .merah .rightPanel h3{
   background:#dba07f;
}
.hijau .head{
   border:1px solid #8fc960;
   background:#8fc960;
}
.hijau .leftPanel,.hijau .rightPanel{
   border:1px dotted green;
}
.hijau .leftPanel h3, .hijau .rightPanel h3{
   background:#b6d1a0;
}

Langkah 4. 
Membuat Script Javascript
Javascriptnya simple aja, yaitu membuat agar jquery mengganti attribut “class”
di body sesuai keinginan

sekian lama gak buka blog, waktu tersita buat ngerjain skripsi.skarang gw mau bagi-bagi ebook tentang PHP Ajax jQuery.
silakan di download: Link