Membuat Background Blog Berganti-ganti Warna

Membuat Background Blog Berganti-ganti Warna, mungkin agak sedikit membingungkan saya saat memberi judul trik blogger satu ini. Langsung saja ke pembahasan cara membuat bacground blog bergonta ganti warna sepeti disko.

Trik ini menggunakan jQuery dan CSS 3 yang saya peroleh saat saya belajar membuat Blogazine. Saat melihat salah satu karya orang luar bernama Desandro dengan blogazinenya, disalah satu artikelnya dibuat halaman dengan backgound bergonta ganti.

Sebenarnya desandro membuatnya di sebuah web tapi saya coba praktekan di blogspot dan ternyata berhasil.

Pertama dan paling utama login dulu ke akun sobat, "saya masih menggunakan blogger tampilan lama". Sebelum diotak atik silahkan dowload fulltemplate sobat mengatisipasi jika terjadi kesalahan atau tidak berhasil). Jika sudah siap masuk ke Design -> Edit HTML masukkan Kode berikut ini diatas kode </head>.

<style>
body {
background-color: yellow;
background-color: hsl(  60, 90%, 40% );
}
.csstransitions body {
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.csstransitions body.color0  { background-color: hsl(   0, 90%, 40% ); }
.csstransitions body.color1  { background-color: hsl(  20, 90%, 40% ); }
.csstransitions body.color2  { background-color: hsl(  40, 90%, 40% ); }
.csstransitions body.color3  { background-color: hsl(  60, 90%, 40% ); }
.csstransitions body.color4  { background-color: hsl(  80, 90%, 40% ); }
.csstransitions body.color5  { background-color: hsl( 100, 90%, 40% ); }
.csstransitions body.color6  { background-color: hsl( 120, 90%, 40% ); }
.csstransitions body.color7  { background-color: hsl( 140, 90%, 40% ); }
.csstransitions body.color8  { background-color: hsl( 160, 90%, 40% ); }
.csstransitions body.color9  { background-color: hsl( 180, 90%, 40% ); }
.csstransitions body.color10 { background-color: hsl( 200, 90%, 40% ); }
.csstransitions body.color11 { background-color: hsl( 220, 90%, 40% ); }
.csstransitions body.color12 { background-color: hsl( 240, 90%, 40% ); }
.csstransitions body.color13 { background-color: hsl( 260, 90%, 40% ); }
.csstransitions body.color14 { background-color: hsl( 280, 90%, 40% ); }
.csstransitions body.color15 { background-color: hsl( 300, 90%, 40% ); }
.csstransitions body.color16 { background-color: hsl( 320, 90%, 40% ); }
.csstransitions body.color17 { background-color: hsl( 340, 90%, 40% ); }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script src="http://dl.dropbox.com/u/34111559/Kusus/Pelangibg.js"></script>

<script src="http://dl.dropbox.com/u/34111559/Kusus/Saya%20pakai%20project%20desandro2010.js"></script>

Setelah itu cari kode body di CSS template sobat .Jika pada kode CSS body terdapat CSS background misalnya : "background-color: white;", dihapus saja kode tersebut. Setelah itu klik Save Template.

Silahkan di coba atau sekedar dibaca buat tambah ilmu juga gak apa apa. Sumber inspirasi kode dari Desandro : http://desandro.com. Semoga bermanfaat.