Mengubah warna homepage menggunakan jQuery

Tanpa basa basi, langsung aja. para penonton sekalian, 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

OK mulai, karena ini sifatnya simulasi, jadi CSS dan javascriptnya digabung ke dalam 1 file

DEMO APP DOWNLOAD

1.Pembuatan layout HTML

Langkah awal kita buat terlebih dahulu layout dari homepagenya

    <div class="head">HEADER</div>
    <div class="wrapper">
         <div class="leftPanel">
             <!-- link untuk ganti themes -->
             <a href="#" class="biru">Biru</a> |
             <a href="#" class="merah">Merah</a> |
             <a href="#" class="hijau">Hijau</a>
             <!-- end links -->
            <h3>Judul 1</h3>
            <div class="contentModul">Content</div>
        </div> 
        <div class="rightPanel">
          <h3>Detail</h3>
          <div class="contentModul">
            Content Kanan
          </div>
        </div>
    </div>

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;
}

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;
}

4. Membuat Script Javascript

Javascriptnya simple aja, yaitu membuat agar jquery mengganti attribut “class”
di body sesuai keinginan

<script>
$(document).ready(function(){
  $(".leftPanel > a").click(function(){
            $('body').attr('class',$(this).attr('class')); 
    } )
})
</script>

Sederhana bukan??? dan Penontonpun menjawab “Bukaaan”

untuk demonya silahkan liat di sini

11 Comments

May 17, 2010 10:02 pm by rere Reply

trims...pecah juga rasa penasaran ganti tema secara mudah..
May 28, 2010 10:27 pm by bukhory212 Reply

mudah2an tambah motivasi untuk belajar lagi neh..thanks tutorialnya bro
June 5, 2010 9:12 am by Ary Wibowo [at] nucreativa Reply

ane juga pernah buat skrip kyk gini untuk slh satu portfolio ane. cm wktu itu msh manual ganti warnanya. ga pake ajax. eh bis baca ini jd kepikiran ganti skripnya pake jquery (knp ga kepikiran pake jquery yah. aduh udah tua aja ane ini)
July 6, 2010 5:44 pm by aung Reply

thx bwt tutorialnya,,,,,
July 21, 2010 5:08 pm by Hamster 2000 Reply

wah bisa di coba tu....
July 27, 2010 11:59 am by Annisa Reply

Thanks Bro Tutorialnya, Very Usefull...
September 29, 2010 9:35 am by Kang Su Reply

saya membuat form dengan jquery berhasil, tapi ketika saya panggil dihalaman index kok malah ndak jalan ya jquery na..!!!
trus css yang di form malah ikut css yang di index...........
mohon bantuan na

thanks b4
October 25, 2010 4:20 pm by romdhan m u Reply

thank's ya om, tutorialnya sangat membantuuuu,,, mantabbb
February 21, 2011 3:21 pm by ibanten.com Reply

tuh kalo di refresh background nya kembali ke warna asal, coba implementasikan pake cookie jquery....

March 4, 2011 2:22 pm by ibnoe Reply

@ibanten.. yup.. masih belum ada media penyimpanannya :)

August 10, 2011 7:28 pm by Puzha Reply

Mas,, tambahin lgie dong tutorial jquery nyaa,,,
soalnya saya baru kelas 2 SMK pengen banget mengulik jquery,,,
makasih mas,,,