Mengganti Warna Background Blog Secara Otomatis Berdasarkan Waktu

Kali ini saya akan berbagi dan menyampaikan 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, 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 membuat blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

Langkah-langkah praktis 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 aba-aba ]]></b:skin> lalu salin dan pastekan aba-aba dibawah ini di atasnya

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

Yang berwarna putih adalah aba-aba warna yang sanggup 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 aba-aba dibawah lalu cari aba-aba </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 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.

Sumber https://8tutorialandroid.blogspot.com/

Share this post