Mengganti Warna Background Blog Secara Otomatis Menurut Waktu

Kali ini aku akan membuatkan dan mengatakan cara Mengganti Warna Background Blog menurut waktu secara otomotis yang akan beradaptasi 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, jikalau 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 menciptakan blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

Langkah-langkah gampang merubah dan mengganti background blogger menurut waktu

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

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

Yang berwarna putih ialah instruksi warna yang dapat anda rubah sesuai dengan Design Blog anda.

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

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

5) Salin instruksi dibawah kemudian cari instruksi </body> dan pastekan sempurna 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 jikalau 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.

Share this post