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.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
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!
No comments:
Post a Comment