Change your Blog Background According to the Time of Day
April 23, 2008 Filed under: Customize your Blogger Template 8 Comments
I've been working on a script which you can use to change the background color, or even any other background element of your blog, depending on the time of day.
You can see this script in action on the Time of Day test blog. Here I have used the script to change the main background color of the Minima template according to the time of day. Take a look at different times to see the changes take effect.
There are two versions of this script available for you to install instantly in your blog:
- A pale color palette
- A dark color palette
This means you can choose the color scheme which would work best for your existing fonts and color settings without having to also change the colors of existing elements in your blog.
If you would prefer to use your own color schemes, add images to the background, or change the background of other elements of your blog, I have also provided instructions for you to customize this script and adapt it to your own personal needs.
Here are the two different color schemes you could install in your blog:
Pale Scheme
Dark Scheme
Installing the Time of Day Background Color Script in your Blog
The script used to change the background color is really easy to install. Simply locate the closing </head> tag in your Blogger template, and add one of the following lines directly before it (choose the script according to the color scheme you would prefer to use):
For the pale color scheme:
For the dark color scheme:
Then locate this section of your Blogger template:
body {
background: $bgcolor;
This section may not appear exactly like this, or you may notice there is also a background image referenced in the background line. In either case, you need to delete the background statement which is highlighted in red text to ensure the JavaScript line you previously added is able to accurately declare the background color according to the time of day.
Now preview your blog. If all has gone to plan, you should see the background color of your blog has changed to the color specified for the time of day. You can then proceed to save your template.
Customizing the Time of Day Background Script
If you are able to edit and host the "Time of Day" JavaScript file yourself, you can use this as a basis for further customization including:
- Using different background images for different times of day
- Use different color schemes to those suggested above
- Change the background color for a different section of your blog (for example, the header section)
- Change the font colors depending on the time of day
First you should download a copy of the Time of Day Background script, then make your changes in your favorite editor (I use Notepad ++ though you could just as easily use Notepad or another simple text editor).
Once you have made your changes, you will need to upload your revised script to a hosting provider, and link to the script from the <head> section of your blog template as described above.
Here is a transcript of the JavaScript in its simplest form, which is used only to alter the background color:
var d = new Date()
var h = d.getHours()
//
if (h < 6) document.write('<style type="text/css">body{background: black; color: black}"></style>')
else if (h < 12) document.write('<style type="text/css">body{background: blue; color: black}"></style>')
else if (h < 18) document.write('<style type="text/css">body{background: yellow; color: black}"></style>')
else if (h < 24) document.write('<style type="text/css">body{background: red; color: black}"></style>')
Each time section features a JavaScript command, like this:
document.write('<style type="text/css">body{background: black; color: black}"></style>')
You can change the code highlighted in red to alter the effects of the script. For example, if you wanted to use a background image instead of a color, you could change the red section of code to something like this:
body {background:url(http://image-host.com/yourimage.jpg)}
To change the color of the header section (rather than the main body background), you would change this as follows:
#header {background: #ffff00;}
In fact, you can use this script to alter any CSS styled element of your blog template to suit the time of day! Just be sure to change the properties for each time slot in the JavaScript code to ensure your design will appear the way you prefer.
I'm currently working on a new template for Blogger blogs which uses a variation of this script in a rather elegant way. I will put this up for download as soon as it's ready, but in the meantime I would love to see how you have used this script to personalize your own blogs!
Discuss "Change your Blog Background According to the Time of Day"
Comments? Questions? Let us know what you think! Join the discussion >>
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
This has to be one of the coolest things I've read!! :D I love my brother's mobile because it does something like this, and doing it in my blog would be amazing! But I think I'd have to tweek a bit on my template to make it work... Still, I love it!
Hi Amanda,
The feature is indeed unique and cool, but I suspect that it will be implemented on a niche blog. I think mostly it will be implemented on personal blogs. My personal thinking is this, that a high traffic niche blog won't take the risk of implementing it, as the owner may think that changing colors of the layout frequently may annoy the visitors and drag them away. What do you think about this?
But in the end, I must say that this feature is indeed very innovative and good.
hi amanda, you always do a great work and thanks to also always share it.
this is out of topic, but is it possible in blogger to put a script enable us to display the counting number of a file has been downloaded so far?
thank you in advance,
gre
Amanda, this is wonderful. I have to try it on with two different backgrounds... but before I'll have to "photoshop" the currently one! perhaps with a lamplight... Thanks, i'm sure I'll find it useful soon!
For Ale,
I used to have something similar on my phone (it would also change depending on my location). This is partly what inspired me to create this.
It is possible to use this for background images (with a bit of tweaking) which I'm currently experimenting with for a new template.
Thanks for stopping by to comment :)
For Rajeev Edmonds:
I agree that not many "professional" blogs would benefit from changing the background considerably at different times of day. This was one of the main reasons why I used such similar colors for each of the premade scripts.
Certainly personal blogs, artistic and design style blogs too may use this to hreat effect. There's also the possibility of using the script to write a greeting message instead of a background script (eg: "Good Morning", "Good Evening").
But just take a look at this site to see how well something similar to this may be integrated into a blog design. I'm sure you'll agree this is awesome!
For Template-Godown:
This is something I've been wondering about myself but haven't yet had the time to research. I will be sure to post this though if I find a method which works! I'm sure this would be very useful in determining popular templates on our sites!
For Yo Misma:
I'm glad to know you find this useful :) For a template I'm working on, I used slightly different color filters for the background images (I'm not great with Photoshop) but I can't wait to see what you come up with!
What a great tip - I shall be looking at using this for my bespoke shirts blog for sure.
Hi, i'am 'Ran [read: run in English].
I used "your time of day" on my blog and i like it very much,BIG THANKS.But i've tried to customized it [using background] but it didn't work, bcause i add "repeat x-y" after the image url.If i use small image for the background will it repeat the whole background?,Thanks
Anyway, i really love ur site.It's very useful to me,much! And could you please visit my blog give a comment about how i'm doing for customizing blog so far.
Note: it's not done yet.