Mengganti Warna Background Blog Secara Otomatis Berdasarkan Waktu

Advertisements

Advertisements

Kali ini saya akan berbagi dan menunjukkan 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 malam, pagi, siang dan sore. Dan dari 4 waktu tersebut blog anda akan berubah warna.

Lihat Demo

Penjelasan secara sederhana, jika seseorang sedang membaca blog anda dari Tokyo dan yang lain sedang membacanya dari London maka kedua pembaca tersebut akan melihat warna background blog anda tersebut berbeda. Keuntungan dari teknik ini yaitu akan membuat blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

Langkah-langkah mudah merubah dan mengganti background blogger berdasarkan waktu

1) Masuk ke dashboard blogger anda lalu klik Template
2) Klik back up lalu klik Edit Tempalte
3) Cari kode ]]></b:skin> lalu salin dan pastekan kode dibawah ini di atasnya

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

Yang berwarna putih adalah kode warna yang bisa anda rubah sesuai dengan Design Blog anda.

4) Ganti jQuery anda dengan versi dibawah ini lalu letakkan tepat dibawah ]]></b:skin>

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

5) Salin kode dibawah 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 blogspot anda akan berubah warna secara otomatis. Tetapi jika anda ingin menggantinya dengan gambar, anda hanya perlu merubah Value CSS pada Property Background dari tiap Selector di langkah 3 dengan gambar atau foto milik anda.