Login ke blogger
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
a. Masukan script jQuery berikut sebelum
b. Masukan javascript Switch Stylesheets berikut dibawah script jQuery tadi.
2. HTML
Untuk masalah penyimpanan kode
:: 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
a. Buat kode
body {background:#ccc;}
disimpan sebagai CSS atau berinama Style1.css
b. Buat kode
body {background:#333;}
disimpan sebagai CSS atau berinama Style2.css
:: catatan:
- Gunakan "code editing" untuk membuat kode
- Warna #ccc dan #333 dapat anda rubah sesuai template anda, dan bisa juga diganti dengan image.
c. Simpan kedua
d. Ambil URL link 2 alamat CSS tersebut (klik kanan copy link), seperti link berikut:
dan
kedua link tersebut, ubah menjadi:
Masukan script tersebut diatas
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:
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.
Artikel Terkait di Bawah posting
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. Javascripta. 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.cssdan
http://blogspot.comlu.com/Style2.csskedua 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><
0 komentar:
Posting Komentar