Cara Membuat Background Blog Berubah Sesuai Waktu

Memiliki tampilan blog yang keren dan menarik tentunya akan memiliki nilai tersendiri, itu sebabnya kenapa banyak sekali blog yang menyajikan tutorial seputar modifikasi tampilan blog. Saya sendiri termasuk orang yang suka sekali mengutak atik tampilan blog dengan tujuan ingin belajar lebih banyak seputar script yang ada di blogspot. Jadi mohon maaf ya kalo sobat merasa kurang nyaman karena setiap berkunjung ke sini ada saja tampilan yang berubah pada halaman blog ini.

Nah bicara soal tampilan blog, kali ini saya mau berbagi cara menjadikan background blog berubah ubah sesuai waktu kunjungan. Misalkan sobat berkunjung pada pagi hari di blog ini maka background blog berwarna biru, tetapi jika sobat berkunjung lagi pada siang hari warna background blognya akan berubah menjadi orange begitu juga ketika berkunjung pada sore dan malam hari backgroundnya akan berubah dengan sendirinya menjadi warna yang lain yang sudah kita tentukan sebelumnya.

Nah jika sobat tertarik untuk menerapkannya di blog sobat. Silahkan ikuti langkahnya berikut ini.

Pada Dashboard Klik Tata Letak >> Add a Gadget >> HTML/Javascript.
Kemudian Copy paste kode berikut ini dan untuk judul dikosongkan saja:


<script type='text/javascript'>
//<![CDATA[
 var now = new Date();
 var hours = now.getHours();
   //16-18 sore
if (hours >= 16 && hours <= 18){
document.body.style.background="#3399FF url('URL Gambar') fixed top repeat-x";
   //19-21 malam
 } else if (hours >= 19 && hours <= 21){
document.body.style.background="#99CC66 url('URL Gambar') fixed top repeat-x";
   //22-4 malam
 } else if (hours >= 22 || hours <= 4){
document.body.style.background="#993399 url('URL Gambar') fixed top repeat-x";
   //5-6 pagi
 } else if (hours >= 5 && hours <= 7){
document.body.style.background="#CC99CC url('URL Gambar') fixed top repeat-x";
   //7-8 pagi
 } else if (hours >= 7 && hours <= 8){
document.body.style.background="#9966CC url('URL Gambar') fixed top repeat-x";
   //9-15 siang
 } else if (hours >= 9 && hours <= 15){
document.body.style.background="#868579 url('URL Gambar') fixed top repeat-x";
 }
//]]>
</script>

Keterangan :

Kode yang berwarna merah adalah kode warna background, silahkan ganti dengan warna yang di inginkan atau sobat bisa juga menuliskannya dengan nama warna seperti red, green, blue dan lain lain.
Klik disini untuk Kode Warna HTML
Untuk URL Gambar silahkan ganti dengan Gambar jika sobat ingin menggunakan gambar sebagai backgroundnya jika tidak hapus saja kode tersebut.
Untuk yang lainnya silakan bereksperimen sendiri sesuai selera sobat.