Membuat background blog beruah warna berdasarkan waktu

Backround blog berubah warna berdasarkan waktu - Kalau dulu saya pernah memposting tentang Cara membuat Background slideshow Untuk postingan kali ini saya akan berbagi tutor tentang cara Mengganti warna Background blog berdasarkan waktu secara otomotis yang akan menyesuaikan diri dengan jam dari para pengunjung blog. Saya mengambil format waktu 24 jam dengan membaginya menjadi 4 kondisi waktu yakni Pagi, Siang, Sore dan Malam, dari 4 waktu tersebut blog anda akan berubah warna.

DEMO Klik disini!!!

Keuntungan dari tutorial ini yaitu akan membuat blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.siang { background:#78d9d9;}
.sore { background:#d97979;}
.malam { background:#3c3c3c;}
.pagi { background:#f6fbac;}

Keterangan :
Kode Warna bisa di rubah sesuai design Blog sobat masing²

4) Tambahkan script JQuery berikut ini tepat dibawah kode ]]></b:skin>

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

5) Salin kode dibawah ini lalu cari kode </body> dan pastekan tepat diatasnya.

<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>

6) Klik Simpan

Background blog anda akan berubah warna secara otomatis, jika anda ingin menggantinya dengan gambar, anda hanya perlu merubah Value CSS pada Property Background dari tiap Selector di langkah 4 dengan gambar atau foto milik anda.

Membuat background blog beruah warna berdasarkan waktu 2014-07-09T21:52:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown