Jumat, 11 September 2009

Switch Stylesheets jQuery: Trik Gonta-ganti CSS

03.41  syarif abdur rohman  No comments

Switch Stylesheets jQuery

Demo

Trik "Switch Stylesheets" dengan jQuery ini dikembangkan oleh kelvinluck.com. Dengan menggunakan "Switch Stylesheets" ini kita dapat mengganti (gonta-ganti) tampilan template kita, seperti: background, warna, font, image, dll, hanya dengan melakukan klik. Pada percobaan ini saya hanya merubah (Switch Stylesheets) tampilan warna pada background (2 warna), lihat di demo pada bagian sidebar berjudul "Switch Stylesheets (Background)", klik style2 setelah loading selesai.

Untuk menggunakan trik ini pada "blogspot/blogger template", kita mesti memiliki tempat hosting untuk menyimpan file CSS, untuk itu perlu tempat penyimpanan yang baik agar tidak terjadi masalah.

Tahapan Penerapan Switch Stylesheets di Blogger Template:

1. Javascript

a. Masukan script jQuery berikut sebelum </head> (jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>


b. Masukan javascript Switch Stylesheets berikut dibawah script jQuery tadi.

<script src='http://blogspotcode.googlecode.com/files/styleswitch.js' type='text/javascript'/>


2. HTML

Untuk masalah penyimpanan kode HTML ini bebas, tapi pada percobaan ini saya menyimpannya di sidebar pada "add gadget (HTML/JavaScript Add)" . Kode tersebut adalah :

<p> Ganti Warna Background:</p>
<ul id="switch">
        <li><a href="serversideSwitch.html?style=style1" class="styleswitch" rel="styles1">styles1 (#ccc)</a></li>
        <li><a href="serversideSwitch.html?style=style2" class="styleswitch" rel="styles2">styles2 (#333)</a></li>
</ul>


:: catatan:
- styles1 adalah warna default, style2 adalah warna ke 2 (warna pengganti).
- kode yang berwarna merah tersebut mesti disesuaikan dengan title='styles1' pada link CSS seperti penjelasan dibawah ini.

3. CSS

Idealnya mrnyimpan file CSS adalah seluruh scriptnya, tapi saya pada percobaan di blogspot ini hanya menyimpan kode CSS untuk Switch Stylesheets atau hanya bagian yang dirubah, seperti:

a. Buat kode CSS pertama:

body {background:#ccc;}

disimpan sebagai CSS atau berinama Style1.css

b. Buat kode CSS kedua:

body {background:#333;}

disimpan sebagai CSS atau berinama Style2.css

:: catatan:
- Gunakan "code editing" untuk membuat kode CSS tersebut seperti Notepad++
- Warna  #ccc dan #333 dapat anda rubah sesuai template anda, dan bisa juga diganti dengan image.

c. Simpan kedua CSS tersebut ditempat hosting, saya menyimpan ditempat gratisan, ini resikonya sewaktu2 bisa ngak aktif, untuk itu cari tempat hosting yang baik, atau kalo perlu simpen ditempat hosting berbayar :).

d. Ambil URL link 2 alamat CSS tersebut (klik kanan copy link), seperti link berikut:

http://blogspot.comlu.com/Style1.css

dan

http://blogspot.comlu.com/Style2.css


kedua link tersebut, ubah menjadi:

<link href='http://blogspot.comlu.com/Style1.css' media='all' rel='stylesheet' title='styles1' type='text/css'/>

<link href='http://blogspot.comlu.com/Style2.css' media='all' rel='stylesheet' title='styles2' type='text/css'/>


Masukan script tersebut diatas <b:skin><![CDATA[ atau dibawah <head>

Catatan: kode yang berwarna merah tersebut yang disesuaikan dengan bagian HTML diatas.

e. Karena yang dirubah warna background pada body, maka harus menghapus background pada body (kecuali kalau kita memasukan semua kode css dalam file, maka tahapan ini tidak perlu) seperti:

 body { background: #000000;
color: #fff;
font-family: arial;
}


background: #000000; itu yang perlu di hapus, karena sudah diwakili dengan style css diatas.

4. Sekian.
Anda dapat membuat lebih dari 2 CSS Switch Stylesheets, silahkan memodifikasi sesuai keinginan anda.

Posted in: ,,

0 comments:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More