Klik Pinrang

Mengubah Background Halaman Web/Blog Menggunakan jQuery

Hello Rekan² ^_^
Jumpa Lagi Bersama assadotcom Yang Ganteng Lahir Batin!!!
Narsize Mode On ^_^
Yang Kali Ini Akan Membawakan Thread Dengan Judul
Mengubah Background Halaman Web/Blog Menggunakan jQuery

Ok. Cukup Intro DjayuzZzNya 'N Aye Mulai Aja Nulis Banyaknya ^_^

Mengubah Background Halaman Web/Blog Untuk Sebagian Web Designer Or Blog Designer Aye Rasa Bukan Suatu Hal Yang Asing Lagi, Tapi Sok Tau Aye Pada Umumnya Source Code Yang Digunakan Adalah styleSheet. Nah Di Sini Qta ("Qta" Loe Aja Kale Gw Enggak ^_^) Akan Mencoba Mengubah Background Web/Blog Tanpa Harus Menggunakan styleSheet Tapi Menggunakan jQuery.

Sebelum Ngebaca Lebih Lajut Tulisan Banyak Ini,
Silahkan Lihat Demonya Terlebih Dahulu (Click Image) »»»

Nah... Untuk Cara Penerapannya Pada Web/Blog,
Pertama Qta Harus Menyertakan Library jQuery-nya...

Code:

<script src="http://assadc0de.googlecode.com/files/jquery-1.2.6.pack.js"></script>

Untuk Pengguna Blogger Letakan Di Bawah Code

Code:

]]></b:skin>

Selanjutnya Qta Buat 3 Kelas Di CSS-Nya Dengan Code

Code:

.bg1 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6exswPD7aXGjo2aMiQqXd04slRrVzlC8BmXX3D26-pBy8aWt7u9KkE8DX05CuxMjFxeLXOezTumWRDmkikaTvjyxPTuQ3lhY6IxdZLwx3mH-mjtUsDZKcxU48dFU-n_hoJnTxRBKnP4/) repeat-x; background-color: #6c0000; }
.bg2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tu-lSMcRsWfR5p4uq38wyVkqctnBp2C7vv_0cRC7wUXbzOXnc8_YfXgbC6tQMQ_XF6ffMSZiPpKPyvzGLdo_EeFPB3i6YXHb3g9bj9XLlhr37hyphenhyphenZ5SBxLwFKq1yQEFLa3fG1VhoROZY/) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNOExk2ePtB1bfJc9MVwymXi6dnyzQTOZcZHVzt9ASsLCaThZBh-6xkrFZDy8yt3_0zAtuhnaCY1rHloD9fGlKSzUUcGdvc54JTb3rkT0XyDvxiwvdqzvi6pvECfK33vBNzzJ8C3BHXY/) repeat-x; background-color: #00345B; }

Untuk Pengguna Blogger Letakan Di Atas Code

Code:

]]></b:skin>

Selanjutnya Qta Buat Kelas jQuery Pada Tubuh CSS Body-nya Dengan Code

Code:

<script type='text/javascript'>
$(document).ready(function(){

  $("li.one").click( function(){ $
    ("body").removeClass('bg2 , bg3').addClass("bg1");
  });

  $("li.two").click( function(){ $
    ("body").removeClass("bg1 , bg3").addClass("bg2");
  });

  $("li.three").click( function(){ $
    ("body").removeClass("bg1 , bg2").addClass("bg3");
  });

});
</script>

Untuk Pengguna Blogger Letakkan Di Atas Code

Code:

</body>

Selanjutnya Yang Terakhir Qta Buat Link Untuk Merubah Latar Belakangnya Dengan Code

Code:

<ul>
<li class="one"><a href="#">One</a></li>
<li class="two"><a href="#">Two</a></li>
<li class="three"><a href="#">Three</a></li>
</ul>

Untuk Pengguna Blogger Tambahkan Gadget Trus Pilih HTML/JavaScript Trus Tinggal CoPas Codenya.

Selanjutnya Selesai ^_^ Gampangkan!!!

Catetan:
Tulisan Banyak Ini Cuman Dasar, Buat Rekan² Yang Jago jQuery 'N CSS Silahkan Dikembangkan Kembali ^_^

S'moga Bermanfaat