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.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.
JQery
- Scroll Background jQuery di Blogger Template
- Slide Show, jQuery Slider di Blogger Template
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Social Bookmarks dengan jQuery di Blogger Template
- Drag Me Donk jQuery di Blogger Template
- Penerapan Dropdown Menu jQuery di Blogger Template
- Tabs - jQuery: Dalam Beragam Jenis
- Penerapan "Simple Tabs" di Blogger Template
- Penerapan Link Nudging di Blogger Template
- Menu Navigasi Vertikal dengan Efek jQuery
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
0 komentar:
Posting Komentar