Merubah background blog berdasarkan waktu

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.
Keuntungan dari tutorial ini yaitu akan membuat blog anda menjadi terlihat lebih kreatif dan cocok untuk di implementasikan pada blog pribadi.

ikuti langkah2 dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F dan 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;}

Note: 
- ubah kode warna merah dengan warna yang kalian inginkan
- Anda juga dapat merubah kode warna merah dengan Url gambar 

5. Kemudian tekan Ctrl+F dan cari kode </head> 

6. Tambahkan script JQuery berikut ini tepat diatas kode </head>

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

7. 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>

8. Simpan template anda
Sekarang background blog anda akan berubah warna secara otomatis.
Sekian post dari saya semoga tutorial ini dapat bermanfaat

keyword:
- cara merubah background blog berdasarkan jam
- cara merubah warna background blog berdasarkan waktu
- cara merubah warna background blog berdasarkan jam
- cara merubah gambar background blog berdasarkan waktu
- cara merubah gambar background blog berdasarkan jam
- cara membuat warna background secara otomatis
- cara membuat gambar background secara otomatis

Share this

Nursalim Laimi

Artikel Terkait