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!
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!
ReplyDeleteHi Amanda,
ReplyDeleteThe 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.
ReplyDeletethis 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!
ReplyDeleteFor Ale,
ReplyDeleteI 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:
ReplyDeleteThis 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.
ReplyDeleteHi, i'am 'Ran [read: run in English].
ReplyDeleteI 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.
WoW!
ReplyDeleteReally smart script! It reminds me of my iGoogle Page which had the header image change with time.. maybe you should check that feature too :)
Will tweak & add it on my blog (& then showoff! :D )
wew, make evolution baground....luv ur site.It's very useful.
ReplyDeletebtw, can i replacing color in pale scheme?
regards from indonesia
Hi, thanks for the great work you do! I am playing around with a test blog (so I don't disrupt my main blog), I implemented the code above to change the background image of the body and the header based on the time of day.
ReplyDeleteI want to make the wrapper background black without making header background go black, is there a name for the part that encloses the sidebars and main areas that I can make black or is there a better way to do it?
If you look at my blog, you will notice the sidebars are only black as far down as there is text, I want it to be black all the way down to the bottom of the page.
http://w-test-1.blogspot.com/
I thank you for your time.
OK, Amanda, I was able to get assistance for the sidebars going all the way to the bottom, now the next question, I hope you can answer this, I want to make the header image change along with the background, this is the code I used:
ReplyDeleteOK, blogger will not allow me to include the code, you can see it here:
http://wretha.googlepages.com/bk1.jpgbackgroundcolors.js
Well, if you go to the test blog, http://wretha-test-2.blogspot.com/ you will see that the header image does not change, right now what you see is the graphic with a transparent "sky" area, the image I want to appear has my picture imbedded and there is no transparency, is there any way to make the header image change as well as the background?
Thanks,
Wretha
http://wretha-test-2.blogspot.com/
Hi Amada, it's Wretha again, I finally figured out how to make the header image change according to the time of day as well along with the background.I had to make a separate js code for the header images. I also had to make a transparent gif the same size as my header images and upload that in the layout/page elements section, this acts as a place card for the header graphic (otherwise the header area shrinks up if there is nothing there) and it allows the header background image to show through. Anyhoo, check it out if you want:
ReplyDeletehttp://wretha-test-2.blogspot.com/
Thanks as always!
Wretha
read about my adventures living 100% off grid
http://wretha.blogspot.com
ps, Amanda, I know you have been busy working on your own blog (looks good!), but do you actually read the comments? (grin)
ReplyDeleteWretha
read about my adventures living 100% off grid
http://wretha.blogspot.com
Hi Amanda, welcome back, ignore my previous comment, I didn't know you had a back injury, hope everything is good now. :) Sometimes we (I) forget that life happens and it's not all about the computer...
ReplyDeleteWretha
can u make background changes everyday?
ReplyDeleten how about sidebars? can I change it too?
thx ^^
thankzzz
ReplyDeleteHmm..
ReplyDeleteAnyway to make it such that only the Background image reloads and not the whole page? o.0
Hi Amanda,
ReplyDeleteI would like to thank you for writing this great article.
I already implemented it on my blog, I've done a few tweaks according to my needs.
So, please drop by at http://nadzqa13.blogspot.com
thanks for the wonderful article.
ReplyDeleteI'm using your script (with a few tweaks) at http://nadzqa13.blogspot.com
Thank you, I made it! Blogger Buster bookmarked!
ReplyDeleteDear Amanda,
ReplyDeleteThank you for this post, it was very helpful though this did not exactly work with my Blogger template:
i.e. I had to use " instead of ' and > instead of >
This works rather well in conjunction with a background image that with a modified colour temperature:
http://furelys.blogspot.com/
:-)
P.s. a similar script can also cause changes randomly:
http://isuman.blogspot.com/2008/07/random-image-headers-for-blogger.html
Hi Amanda. I been reading your blog and is really nice and helpful, so helpful that I'm here to ask your permision to translate it to spanish as a post in my blog of course with your permission.
ReplyDeleteAnd links pointing to your blog.
Thank you in advance
My Blog http://oliverosm.blogsot.com
This doesn't work because the .js file is down... Could you reupload it or write it complete here?
ReplyDeleteThanks a lot for this! :D
This looks amazing! It is actually the first time i see something like that. But, is it valid with blogger?
ReplyDeleteThanks for the information you provided. It would be great if got more post like this. I appreciate it.
ReplyDeleteA quality set of two pearl or perhaps diamond stud pandora earrings is mostly a classic and also romantic reward. A very simple pendant on the chain is actually surely a vital as is often a quality wristwatch. Then again, no lovely women requirements not pandora uk one but two of any kind of basic item; just being aware of what she needs pandora charms is definitely what makes the treasure especially innovative and emotional. Examine the woman's personal design. pandora necklace If the girl wears bohemian shirts with worn-in denims, pandora jewellery consider some, funky beaded necklace around your neck or a new color bracelet.
ReplyDeletesex
ReplyDeleteporn
free porn
porn
free sex
free sex
porno
escort bayan
Good stuff. It is interesting to read comments. russische frauen
ReplyDeleteTravesti,
ReplyDeleteEscort Bayan,
Travesti,
Escort Bayan,
Adana Escort Bayan,Ankara Escort Bayan,
Antalya Escort Bayan,istanbul anadolu yakası Escort Bayan,
istanbul avrupa yakası Escort Bayan,
Bursa Escort Bayan,
tekirdağ Escort Bayan,
Kayseri Escort Bayan,
izmir Escort Bayan,
mersin Escort Bayan
ankara Escort Bayan,
istanbul anadolu yakası Escort Bayan
Escort Bayan Forum,
İstanbul Travestileri,
Escort Bayan,
Travesti,
Escort Bayan Ankara,
Escort Bayan İstanbul,
holy food I am an everyday cook, providing everyday food for my family christian hospitality simply means the practice of being hospitable.religion and food Thanks for sharing the post spiritual foodis a must for every Christian.
ReplyDeleteFirst of all, thank you for taking the time to read my blog and allow me to share my business coaching (Corporate Coaching, Business Coaching and Life Coaching) plus a piece of my life with you.
ReplyDeleteCoaching in business
small business coaching
I will bookmark this site and visit again. It is very informative. Thanks for sharing.
ReplyDeletevrnjacka banja smestaj
vrnjacka banja privatni smestaj
Changing background color in accordance to time of day seems like a good idea. This is brilliant. Now the steps may be a little complex but the benefits are astounding nevertheless.
ReplyDeleteAnother great idea and def one I will be using in the future. Thanks
ReplyDeleteI'm so excited. I really appreciate sharing this great post. Keep up your excellent work.
ReplyDeletebojanke za decu
bojanke
gledanje u solju
We have just started designing stand alone blogs for clients and this is a nice little feature to use
ReplyDeleteExcellent post. I want to thank you for this informative read. I will bookmark this site and visit again..
ReplyDeleteBanje u Srbiji
Banje Srbije
dnevni horoskop
Excellent article above. May be you need more time to share all the knowledge that you have. wolfies Joint So, thanks for Trilobyte Sales share this information with us, I always Outlandish Gypsy come across this amazing post.
ReplyDeleteThanks for review. I like Ageyev the foundation of this blog has a great Asif 16 variety of comments I really like it, several points of view Margaret Hayden MD helps in the appreciation of the subject.
ReplyDeleteThank you CF Terminals for this blog. That’s all I can say. You most definitely have made this blog into something that’s eye opening and important.Go To Castle You clearly know Your DNA Online so much about the subject, you’ve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.Kenbrewer
ReplyDeleteI hope you can still doing this. Demco Smart Health I mean, Chateau Bayfield posting and searching Prudential Valley Real Estate useful things to share. I really appreciate this kind of information. RTD Enterprises The blog isn't bad, but you can change the style to written.
ReplyDeleteI recently came across your blog Svinsider and have been Southern Cherry reading along. Northbay Faith I think I will leave my first comment. I don’t know what to say except that I have enjoyed reading.Nice blog. Fiftyplus Advocates I will keep visiting this blog very often.
ReplyDeleteI just found this Riverbend Trading blog and have high hopes Get Benefits for Less for it to continue. Elemental 5 Keep up the great work, its hard to find good ones. Goldenwest Realty I have added to my favorites. Thank You.
ReplyDeleteThis is a great post and thank Homes by Mazhar you for sharing this nice experience, DC Sanctuary and hope you can give another posts as soon as possible. Prostate Cancer Climb Nice site , Very Intresting post. Thank you .
ReplyDeleteEasily, Techno Mayhem the post is really the Jasso Tree Service sweetest on this worthwhile Patent Masters topic. I fit in Cheetah Boat MFG with your conclusions Power Punch Productions and will eagerly look forward to your approaching Your Health Counts updates. Saying Washington Coast thanks will not just be sufficient, for the exceptional clarity in your Wilberforce Inn writing. I will immediately grab your rss feed to stay privy of any updates.
ReplyDeletecanada goose jacketsDeduction is the chord: Yeah canada goose down jacket This metamorphosis of place in "the most mythical" total four: The first is the summit of the Kunlun sun sets canada goose down coats Stream canada goose parkas This "mysterious Wu Sanjie" almost level with their own canada goose vest Chen Jiachuan chat window has opened a secret: worry canada goose hat She remember the first two days of the year in late spring
ReplyDeleteIt's really a great and helpful piece of information. I'm satisfied that you just shared this useful info with us. Please stay us up to date like this. Thank you for sharing.
ReplyDeleteThanks to share with us the information. I wish you good luck!
ReplyDeleteQuite interesting post. I simply got nothing at all to do and so I'm just killing time browsing the net and I think that I've found some incredibly practical web page. Thanks a lot
ReplyDelete