Anda akan melihat warna background yang berbeda untuk waktu yang berbeda.
Sebenarnya skrip di bawah ini saya dapat dari www.javascriptkit.com, namun setelah saya lihat kurang efektif, maka saya modifikasi sehingga seperti ini :
<script type='text/javascript'>
<!--var now = new Date();
var hours = now.getHours();//16-18 sore
if (hours >= 16 && hours <= 18){
document.body.style.background="orangered url('http://www.ngungbi.com/sore.jpg') fixed top repeat-x"; // tulis dalam satu baris//19-21 malam
} else if (hours >= 19 && hours <= 21){
document.body.style.background="black url('http://www.ngungbi.com/petang.jpg') fixed top repeat-x";// tulis dalam satu baris//22-4 malam
} else if (hours >= 22 || hours <= 4){
document.body.style.background="black url('http://www.ngungbi.com/malam.jpg') fixed top repeat-x";// tulis dalam satu baris//5-6 pagi
} else if (hours >= 5 && hours <= 7){
document.body.style.background="deepskyblue url('http://www.ngungbi.com/pagi.jpg') fixed top repeat-x";// tulis dalam satu baris
//7-8 pagi
} else if (hours >= 7 && hours <= 8){
document.body.style.background="skyblue url('http://www.ngungbi.com/pagi.jpg') fixed top repeat-x";// tulis dalam satu baris//9-15 siang
} else if (hours >= 9 && hours <= 15){
document.body.style.background="steelblue url('http://www.ngungbi.com/siang.jpg') fixed top repeat-x";// tulis dalam satu baris}
//-->
</script>
Keterangan :
orangered adalah warna background, bisa juga menggunakan kode hex seperti :
#FF0000 -> merah
#00FF00 -> hijau
#0000FF -> biru
#FF0000 -> kuning
atau langsung nama warna seperti red, green, blue, dll.
Cobalah bereksperimen!
url('http://www.ngungbi.com/sore.jpg') jika anda ingin menggunakan background berupa gambar, uploadlah gambar ke sebuah situs dan gantilah URL tersebut dengan URL menuju gambar anda. Jika anda tidak ingin backgroung berupa gambar, hapuslah bagian ini.
fixed gambar tetap diam meskipun halaman di-scroll. Jika ingin gambar ikut bergerak ketika halaman digeser (scroll), maka gantilah menjadi scroll
top adalah posisi gambar. Posisi lainnya :
left posisi gambar di kiri layarrepeat-x adalah pengulangan gambar
top posisi gambar di atas
right posisi gambar di kanan
bottom posisi gambar di sebelah bawah
center posisi gambar di tengah layar
no-repeat gambar tidak diulangCara penggunaan :
repeat gambar akan diulang secara horizontal dan vertikal (tile)
repeat-x gambar diulang secara horizontal saja (sumbu x)
repeat-y gambar diulang secara vertikal saja (sumbu y)
- Bukalah pengeditan template pada blog anda. Jika anda menggunakan Blogger, pengeditan ada di Tata Letak > Edit HTML
- Salinlah kode di atas dan tempatkan di bawah tag <body>
- Bagi pengguna Blogger, jika kode di atas tidak bekerja, cobalah buka Tata Letak -> Elemen Halaman dan buatlah widget baru di mana saja dan pilih 'HTML/JavaScript' pada kategori 'Dasar'/'Basic'.
- Letakkan kode di atas pada widget baru tersebut. Judul dikosongkan saja atau terserah mau diisi apa.
1 komentar:
kalau html mode nya classic, di taro d sebelah mana harish?
Posting Komentar