Mengubah Background Halaman Web/Blog Menggunakan jQuery

Mengubah Background Halaman Web/Blog Menggunakan jQuery


Mengubah Background Halaman Web/Blog Untuk Sebagian Web Designer Or Blog Designer saya Rasa Bukan Suatu Hal Yang Asing Lagi, Tapi setahu saya Pada Umumnya Source Code Yang Digunakan Adalah styleSheet. Nah Di Sini kita 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 »»» DEMO

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


<pre class="Xml" name="code"><script src="http://assadc0de.googlecode.com/files/jquery-1.2.6.pack.js"></script></pre>


Untuk Pengguna Blogger Letakan Di Bawah Code :


<pre class="Xml" name="code">]]></b:skin></pre>


Selanjutnya kita Buat 3 Kelas Di CSS-Nya Dengan Code : 


<pre class="Xml" name="code">.bg1 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQt2yWFjp4dUVxXGNe3dDo2ARM10-4KM7xApk9zZ4lqCuSo4inesbopcDepnYvj7194v0DMFO3nlBmDsT0u2I3YXu8As4M1MY57DI11Vx28KobikjoR9J_bomgHuVAeh2EV_nyx3ID3k8/) repeat-x; background-color: #6c0000; }
.bg2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgXNQqu603SHB-e_7nTu6B6eYfKyfgw0X6kiLWEzcJfwP2lW0pHf3jTSr-TK1i1BGAK5aUcpP4_tAdbq-7gW35CtcOT-su6Kqkzo9yecz1H9t-6abVxVAMTn6JiOR-sWMisiWdvbb-RQ/) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-tw0etonER3g6U_RDGpGi1XagdkXkgq51QUny9YTabPrhnxN73wDElen7-s0xvsULtE3g3NP0KlFPTuz1vkR5o4OGcHXSb5oUjcpBUywYtTuhUQ7j_Xwb2MqThpGIK4jz9Zf_2quye0/) repeat-x; background-color: #00345B; }</pre>


Untuk Pengguna Blogger Letakan Di Atas Code :


<pre class="Xml" name="code">]]></b:skin></pre>


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


<pre class="Xml" name="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></pre>


Untuk Pengguna Blogger Letakkan Di Atas Code :


<pre class="Xml" name="code"></body></pre>


Selanjutnya Yang Terakhir kita Buat Link Untuk Merubah Latar Belakangnya Dengan Code :


<pre class="Xml" name="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></pre>


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