http://www.mypodcast.com/members/file-620908

Read more!

test with pic and vid

Show encrypted text

Read more!

test post

This is a test,

Click to view text.

Read more!

test3

another new post, nothing really here. And here is the rest of it. Read more!

testing testing testing

Just a temporary and useless message, edited to make another post... Not writing anything important, just writing nonsense stuff to fill out this message...
Read more!

Instructions: Changing background AND changing header image based on the time of day

Hi Amanda & all! I used your changing background by time of day script and made it work for my header image, it was challenging, here's what I did to make it work:

The absolute FIRST thing I recommend you do is make a test blog, try out any major changes like this on your test blog first, work out the bugs and make sure it will work before you implement this on your real blog. When you are sure you have everything working on your test blog, go to your main blog and MAKE A BACKUP of your blog BEFORE making any changes, this way you if you make a mistake, all is not lost.

You will need to decide what images you want to use, mine represent a sky background and the header graphics are a mountain with a changing sky. I have 7 different backgrounds that change every few hours, it works off the computer time of the viewer's computer. The background images should all be the same size, and the header images have to be all the same size, you will also need to make a transparent gif image the exact same size as your header graphic, I'll explain why you need that and where to put it.

You will need to have somewhere to host these images, I chose http://pages.google.com/, you can use any graphics hosting site, but they generally only accept images, you would still need to upload the javascript code somewhere, so that's why I used http://pages.google.com/, you can upload and store everything there.

Next, I had to make 2 separate javascripts, one for the background images, and one for the header image, I tried combining the javascript code for both, I'm sure there is a way to do it, but I couldn't get it to work, so I just created 2 separate ones.

I had to make a transparent graphic the exact same size as the header graphic to use as a placeholder (if you don't do this, the header area will shrink down and not allow the images you want to use to show, if you use a non-transparent image, it will override your changing graphics and not allow it to show through), I uploaded the transparent image in the "Layout, Page Elements" section, I clicked on edit where you would add the header image, I uploaded the transparent image there then saved it, I chose "instead of title and description".

Next I went to "edit HTML", I added the appropriate lines to call for the background and header images. Here is what I added and where I added it:

Right after I added this, you will need to add < at the beginning and > at the end of EACH line:

script src='http://wretha.googlepages.com/backgroundcolors.js' type='text/javascript'/

script src='http://wretha.googlepages.com/headerbackground.js' type='text/javascript'/

You will need to change this to where your js is located.

script src='LINK TO WHERE YOUR JS SCRIPT IS LOCATED' type='text/javascript'/

`Here is the js code for mine, you will need to change the links (colored in red) to make them call your background and header images, this is for the background:`

This is for the header image:

You will need to change the image links so they call for your images, not mine. You can change the times, add more times, remove times. You will notice it is in military time, 24 hours, not 12 hours, it took me a little tinkering to figure out the exact times for the changes, the "<" means "less than", the "h" means "hour", so "h < 12" means before 12 noon, "h < 14" means before 2 pm.

Here are the times I have set for mine, and the times they correspond to:

< 6 midnight-6am
< 9 6am-9am
< 12 9am-12pm
< 15 noon-3pm
< 18 3-6pm
< 20 6pm-8pm
< 24 8pm-midnight

If you want to just change just the background (not the header), you will not need the transparent graphic and you will only use the backgroundcolors.js, if you only want to change the header (not the background), just omit the backgroundcolors.js and use the headerbackground.js.

To make the js, just copy and paste the code from above into notepad, then save it as a .js instead of a .txt, it will give you a warning, ignore it and do it anyhow.

If you want to see just the header graphic change and not the background, go to this page:

http://w-2-test.blogspot.com/

Change your computer clock and refresh the page to see the different images. These are the times when the images change:
* 6am
* 9am
* 12pm
* 3pm
* 6pm
* 8pm
* 10am

Have fun! Hope this explained it well enough to follow. Thanks to Amanda for getting me started on this customization, it's been most fun!!!

Wretha
read about my adventures living 100% off grid
http://wretha.blogspot.com
.
.
.
.
.
.

Read more!

One more thing done....

WooHoo! I finally figured out how to change the header image based on the time of day too! This has been so much fun, I love learning new things, especially when I can figure out how it works and how to do it myself. :)

Try changing the time on your computer clock to see the different backgrounds, here are the times:

• 6am
• 9am
• 12pm
• 3pm
• 6pm
• 8pm
• 10am

I may be playing around with the actual background images, mainly the colors, but it is essentially done.

For those who would like to know what I did:

I wanted to make the background image AND the header image change based on the time of the day, I was able to make the background change with no problems, it is done with javascript but I didn't know exactly how to make the header image change too, I finally figured out that I had to make a second javascript for the header image, I was trying to make it all in one set of code, I'm sure there is a way to do it, but I couldn't figure it out, so I just made a second js code for the header image and it worked.

Now if I had an image for the header using the upload feature on Blogger, it would override my image I was trying to add via javascript, if I had no image there, then the space where the header image would go shrinks up (because it thinks nothing is going there) and your header background image gets covered up or just doesn't show.

What I did was to do was make a transparent image (gif) that was the same size as my header image, that's easily done with Photoshop, I uploaded that in the layout/page elements section, that acted like a place card to hold the header space open, but allowed anything that was placed in the header background to show through.

I uploaded all of these images and the javascript code to http://pages.google.com/, this is a free place where you can make webpages, they host the images for free, it's more private then these image hosting sites, and I don't think the image hosting sites will allow you to upload anything but images, no html, no javascript..., anyhoo, with everything there, I can call on my images and javascript from there. Using Photoshop, I created 7 backgrounds, to save on bandwidth, I made the images 100 px wide by 1096 px tall, I made the images repeat side to side but not up and down, and I made them fixed, that means as you scroll down, the background image stays in place, it does not scroll. You can rightclick on the background image (on the side of the page) and choose "view background image" and you will see exactly what the background image looks like.

Next I made 7 header background images, the text, black mountain and my image stays the same, but the background behind it is different in each image., these do not need to repeat or be fixed, it is exactly the same dimensions as the transparent gif so it fits exactly in the header space.

That's all I am going to explain for now, if anyone wants more info, just email me and I'll be more than happy to explain further.
.
.
.
.
.
.
.

Read more!