Membuat-background-blog-berganti-ganti

Membuat Background Blog Berganti-ganti Warna, mungkin agak sedikit membingungkan saya saat memberi judul trik blogger satu ini. Langsung saja ke pembahsan 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.

Lihat Demonya disini "15 September Ultahku"

Jika ANda tertarik membuatnya silahkan baca dan pahami tutorial berikut ini.

Pertama dan paling utama login dulu ke akun Anda, "saya masih menggunakan blogger tampilan lama". Sebelum diotak atik silahkan dowload fulltemplate Anda 9mengatisipasi 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 Anda cari kode body di CSS template Anda 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.

Posted in: bloger