Mengganti Warna Background Blog Secara Otomatis Menurut Waktu

Kali ini saya akan meningkatkan dan menyampaikan cara Mengganti Warna Background Blog menurut waktu secara otomotis yang mau menyesuaikan diri dengan jam dari para hadirin blog. Saya mengambil format waktu 24 jam dengan membaginya menjadi 4 keadaan waktu yakni malam, pagi, siang dan sore. Dan dari 4 waktu tersebut blog anda akan berganti warna.

Lihat Demo

Penjelasan secara sederhana, jikalau seseorang sedang membaca blog anda dari Tokyo dan lainnya sedang membacanya dari London maka kedua pembaca tersebut akan menyaksikan warna background blog anda tersebut berbeda. Keuntungan dari teknik ini yakni akan bikin blog anda menjadi terlihat lebih inovatif dan cocok untuk di implementasikan pada blog pribadi.

Langkah-langkah praktis merubah dan merubah background blogger menurut 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 yakni kode warna yang sanggup anda rubah sesuai dengan Design Blog anda.

4) Ganti jQuery anda dengan model 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 berganti warna secara otomatis. Tetapi jikalau anda ingin mengubahnya dengan gambar, anda cuma perlu merubah Value CSS pada Property Background dari tiap Selector di langkah 3 dengan gambar atau foto milik anda.

Sumber https://henponterbaru.blogspot.com/