HEADER BANNER CHANGING ON RELOAD ON BLOGGER BLOG

If you have been looking for a way to add more images on a single header line and want it to change after every successful reload of your webpage. Here is a simple blogger trick that does that, as the trick help change your blogger blog header images.

 N.B. Backup your blogger template before you kick start this trick on your blog.

Follow the instructions below;

» Sign In to your blogger account.
» Go to Template->Edit HTML
» Find ]]></b:skin> and paste the following code before it.

    #header {
    background: url("your header image url in quotes") no-repeat left bottom;
    margin:0;
    padding:2px;
    }

» Then copy the below script  and place above the </head> tag:

    <script type="text/javascript">
    var banner= new Array();
    banner[0]="1st image url";
    banner[1]="2nd image url";
    banner[2]="3rd image url";
    banner[3]="4th image url";
    banner[4]="5th image url";
    var random=Math.round(4*Math.random());

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

That is all.

If you have any question or questions as regards this blogger trick please drop it via the comments box below. We are happy to help you!