Thursday, February 21

Random Header Image (RHI)

This is a simple tutorial but very useful for creating random images. I think it will be extremely useful for the Blogger platform users because that doesn’t allow the use of plugins like WordPress. First you must have several images to act as background. Try Google to search for photos that you like to see in your site.
This should be the CSS code that is on the blog page template:

# Header ( Background: url # 476 ( "Backgroundpicture.jpg") in the bottom left-repeat;
Margin: 0 0 0;
Padding: 0 0 8px;
Color: # FFF;
)

Next this script allow to create a new style in order to replace the "background" property. If the script does not work for any reason, the image defined in the CSS code will appear.

< type="text/javascript">
Var banner = new Array () / / create a vector (array) called banner


/ /, Next we will fill the vector’s positions
Banner [0] = "address of the image"
Banner [1] = "address of the image"
Banner [2] = "address of the image"
Banner [3] = "address of the image"
Banner [4] = "address of the image"

Var random = Math.round (4 * Math.random ()) / / here is created a random number between 0 and 4, which is related to the vector’s position (array)

/ /, Next we will write the code on page
/ / Banner [random] means the vector banner in the random position previously defined

Document.write ( "< style>");
Document.write ( "# (header");
Document.write ( 'background: url ( "' + banner [random] + '') no-repeat left TOP; '); Document.write ( ")");
Document.write ( '< / style> ");
< / Script>

Put this script inside the tag <> < / head> and it should work. To verify if your header is named header, if not you will need to change this in the script.
And now if you done everything correctly, each time the page is loaded a random image should appear. To test it simply press the F5 key 2refresh your blog.

No comments: