Cara Membuat Background Blog Berubah Sesuai Waktu

10/07/2014 Blogger
background site

Memiliki tampilan blog yang keren dan menarik tentunya akan memiliki nilai tersendiri, itu sebabnya kenapa banyak sekali blog yang menyajikan tutorial seputar modifikasi tampilan blog. Saya sendiri termasuk orang yang suka sekali mengutak atik tampilan blog dengan tujuan ingin belajar lebih banyak seputar script yang ada di blogspot. Jadi mohon maaf ya kalo sobat merasa kurang nyaman karena setiap berkunjung ke sini ada saja tampilan yang berubah pada halaman blog ini.




Nah bicara soal tampilan blog, kali ini saya mau berbagi cara menjadikan background blog berubah ubah sesuai waktu kunjungan. Misalkan sobat berkunjung pada pagi hari di blog ini maka background blog berwarna biru, tetapi jika sobat berkunjung lagi pada siang hari warna background blognya akan berubah menjadi orange begitu juga ketika berkunjung pada sore dan malam hari backgroundnya akan berubah dengan sendirinya menjadi warna yang lain yang sudah kita tentukan sebelumnya.

Nah jika sobat tertarik untuk menerapkannya di blog sobat. Silahkan ikuti langkahnya berikut ini.
  • Pada Dashboard Klik Tata Letak >> Add a Gadget >> HTML/Javascript.
  • Kemudian Copy paste  kode berikut ini dan untuk judul dikosongkan saja:


<script type='text/javascript'>
//<![CDATA[
 var now = new Date();
 var hours = now.getHours();
   //16-18 sore
if (hours >= 16 && hours <= 18){
document.body.style.background="#3399FF url('URL Gambar') fixed top repeat-x";
   //19-21 malam
 } else if (hours >= 19 && hours <= 21){
document.body.style.background="#99CC66 url('URL Gambar') fixed top repeat-x";
   //22-4 malam
 } else if (hours >= 22 || hours <= 4){
document.body.style.background="#993399 url('URL Gambar') fixed top repeat-x";
   //5-6 pagi
 } else if (hours >= 5 && hours <= 7){
document.body.style.background="#CC99CC url('URL Gambar') fixed top repeat-x";
   //7-8 pagi
 } else if (hours >= 7 && hours <= 8){
document.body.style.background="#9966CC url('URL Gambar') fixed top repeat-x";
   //9-15 siang
 } else if (hours >= 9 && hours <= 15){
document.body.style.background="#868579 url('URL Gambar') fixed top repeat-x";
 }
//]]>
</script>


Keterangan :

  • Kode yang berwarna merah adalah kode warna background, silahkan ganti dengan warna yang di inginkan atau sobat bisa juga menuliskannya dengan nama warna  seperti red, green, blue dan lain lain.
    Klik disini untuk Kode Warna HTML
  • Untuk URL Gambar silahkan ganti dengan Gambar jika sobat ingin menggunakan gambar sebagai backgroundnya jika tidak hapus saja kode tersebut.
  • Untuk yang lainnya silakan bereksperimen sendiri sesuai selera sobat.

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

6 comments

Info dan tips yang bermanfaat kang fatur. Baru kali ini saya tahu tips ini. Thanks ya.

Balas

terimakasih.. sangat bermanfaat bagi kaum awam seperti saya yang masih ingin belajar...

Balas