AABI‍TALITA BLOG
7.09.2013

Cara Membuat Backgroud Blog Berubah Sesuai Waktu

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 scrift 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 share 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 diblog sobat.silahkan ikuti langkahnya berikut ini.

1. Pada Dashboard Klik Tata Letak >> Add a Gadget >> HTML/Javascript,

2. Kemudian Copy paste  kode berikut ini dan untuk judul dikosongkan saja :

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


Keterangan :
- Kode yang berwarna biru adalah koda warna background,silahkan ganti dengan warna yang diinginkan.untuk kode warna bisa dilihat disini. atau sobat bisa juga menuliskannya dengan nama warna   seperti red,green,blue dan lain lain.

- Kode yang berwarna merah silahkan ganti dengan URL Gambar jika sobat ingin menggunakan gambar sebagai backgroundnya jika tidak hapus saja kode tersebut.

- Untuk yang lainnya silakan bereksperimen sendiri sesuai selera sobat.

Demikian Cara Membuat Backgroud Blog Berubah Sesuai Waktu semoga bermanfaat.


39 komentar

wah keren ni sob bisa di coba ni sob

kalo bw pake hp ngga keliatan dong :D

silahkan sob,dengan senang hati :)

kayanya sih gitu mbak :D

Tips baru yang pernah saya lihat,langsung ke tkp ini Mas,mantap dah :D

ada nggak sob yang tanpa menggunakan bantuan javascript. Soalnya punyaku sudah kebanyakan javascript eee

yg non js saya blm tau sob,tp yg ini juga cukup ringan untuk digunakan.

wah keren mas, makasih infonya

ia sama sama mas,thx sudah mampir

weisss manteep Mas. saya jadi pengin nyoba. tapi susah ya?

asli keren mas aulia, saya masih menggunakan standaart saja belum ada niat untuk merubahnya,

mantap gan, ane alt + f4 dulu ya

ga susah mas tinggal copas aja ke widget HTML :D

sip mas,terkadang menggunakan yg standard memang lebih baik :)

silahkan gan,met istirahat aja,thx dah mampir :)

backgroundnya jadi seru jika bisa berubah-rubah.

hehe ia mas,pas buat yang suka ganti ganti warna background

wah bisa g abosen yah tiap kali berkunjung, makasih kang scriptnya, saya simpen lah :)

mantap nih tutornya,wajib dicoba nih sob

makasi mas, silahkan di icip icip :D

Wah background blog pun bisa dibuat berubah sesuai waktu, keren juga nih! :)

thx infonya mas..

mantabs..boleh juga dicoba nich :-)

lumayan buat yang suka ganti background :)

monggo mas har, makasi kunungannya :)

kelihatan hitam putih doang ya

asik nih ... kalau berubah sesuai menu makanan bisa ndak ya

wah bloh juga ..tip nya ...oh ya mas Aulia sekalian nanyak template saya saya coba agar responsive tapi scroll bagian width (bawah ) kok masih keliatan ya ..sekalian nanya..siapa tahu punya solusi

silahkan mas mahfid tapi kalo soal design responsive saya nyerah mas :D

blog ini pake juga gak mas? kok blog ini juga tampilan nya kadang ganti ganti

blog ini ngga pake mas,kalo ada yang berubah itu karena saya rubah manual :)

wah ini keren, tapi bikin loading blog lemot ga ya?
folback ya Pak :)

lumayan ringan sob,ok siap laksanakan :D

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.