Random Header Pictures
I have found a trick using Javascript to generate random header pictures. I have 4 pictures on rotations and if you refresh it you can see them on my Test Blog (The current layout is Voluptpat Rounder 3 Column Hybrid: see New Year New Changes if you are interested to know the details). Below shows the steps of modification for the pictures. I also changed the default, so if you have javascript off you will see the picture with the blue planet.
Currently testing the layout of new header pictures. The standard Rounders4 header is kind of boring. I found and edited 3 pictures to 740 pixel by 150 pixel.
Now the colors of these 3 pictures are simply too strong. The header text is not showing very well even when the color is set to black. So I now change the opacity of these pictures to 60% with photoshop. Also the white part of the picture is blending in with the white text, so I reduced the brightness in the picture by 50%.
Compare the 3 with the original header picture, the color intensity is about the same now.
[Blogger Hacks]
posted by Sushi Delight at
11:13 AM
5 Comments:
Could you explain where in blogger I would put the html code for the rotating headers? Is it in the edit html section in customize or in the header edit section? I'm a little confused as to where I should have the pictures for them to rotate. Can I put them up from my computer or should I put them in a website like flickr first? Thanks.
Trying to do this at
http://jazzandculture.blogspot.com
if you go into your template, you should see "BlogPageTitle" on one line and "BlogMetaData" on the next line.
I chose to put the html code (found at http://www.web-source.net/web_development/random_images.htm)one line below "BlogMetaData"
Now, your second question is how to retrieve the image.
This is simply done by modifying the section of html code that has the comment "Specify the first and last part of the image tag."
You would want to change from
FirstPart = ...img src="logo';
LastPart = '.jpg" height="150" width="200"...
to
FirstPart = 'image path';
LastPart = 'image extension';
you might be confused, so let me use my test page as an example.
I have 4 images
Therefore, my NumberOfImagesToRotate = 4;
then, my path to the image is
FirstPart = 'http://photos1.blogger.com/blogger/976/258/1600/top';
you can tell i have saved my image directly on blogger, and just used that link - this is my "image path" - you will have your own "image path" depending on where you store your images
the last part of my image has a "jpg" extension, so i use
LastPart = '.jpg';
so as you can easily see, by changing
FirstPart = ...img src="logo';
LastPart = '.jpg" height="150" width="200"...
to
FirstPart = 'http://photos1.blogger.com/blogger/976/258/1600/top';
LastPart = '.jpg';
Blogger now knows to grab my image from
http://photos1.blogger.com/blogger/976/258/1600/top1.jpg
http://photos1.blogger.com/blogger/976/258/1600/top2.jpg
http://photos1.blogger.com/blogger/976/258/1600/top3.jpg
and
http://photos1.blogger.com/blogger/976/258/1600/top4.jpg
hope that helps.
The first set of pictures are more brighter than the second, and BTW the pics are awesome, amazing landscapes.sv77
i like french fries :D
choc
Post a Comment
<< Home