Background Blog Berubah Warna Menyesuaikan Waktu

Background Blog Berubah Warna Menyesuaikan Waktu - Properti Background dapat kita ubah dan tentukan berdasarkan waktu yang kita sesuaikan, baik itu pagi, siang, sore ataupun malam dengan menentukan jam-nya, jika sebelumnya saya membuat background warna berubah yang ditentukan oleh pengujung/pembaca blog dengan menampilkan warna-warna yang ditentukan.

Secara garis besar maksudnya sama yaitu mengganti background warna, tetapi dalam hal ini background warna berganti secara otomatis ketika waktu menunjukan jam-jam tertentu (pagi, siang, sore dan malam yang sudah diatur jam-nya).

Css Yang Dipergunakan

.pagi {
   background:#aaaaaa url(Alamat Gambar) repeat left top;
}
.siang { 
   background:#bbbbbb url(Alamat Gambar) repeat left top;
}
.sore { 
   background:#cccccc url(Alamat Gambar) repeat left top;
}
.malam { 
   background:#dddddd url(Alamat Gambar) repeat left top;
}

Dalam css tersebut selain warna ditambahkan gambar sebagai background, jika kalian menginginkan background nya merupakan gambar, kalian bisa menghilangkan kode warna atau kode warna diganti menjadi tranparent, untuk kesesuaian background gambar kalian bisa mencari keterangan mengenai properti background.

Selanjutnya tambahkan JQuery, dan tempatkan JQuery tersebut dibawah ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Perhatikan rangka template, jika JQuery tersebut sudah ada, jangan menambahkan JQuery tersebut dan jika JQuery yang sudah ada menggunakan versi lawas, bisa mengganti JQuery tersebut dengan JQuery yang diatas.

Setelah itu pergunakan JavaScript dibawah ini dan tempatkan diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 18 || n < 6)
document.body.className = "malam";
else if (n > 6 && n < 11)
document.body.className = "pagi";
else if (n > 15 && n < 18)
document.body.className = "sore";
else
document.body.className = "siang";
});
//]]>
</script>

Save template kalian, dan backgound template kalian akan berubah menyesuaikan waktu yang telah ditentukan.

Semoga bermanfaat.