Membuat background blog beruah warna berdasarkan waktu ~ blog sepot

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.

Terima kasih telah membaca artikel tentang Membuat background blog beruah warna berdasarkan waktu di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.