Background Changer For Blogger

Are you confused and don't know what background you're going to use for your blog? Almost all web designers and aspiring bloggers are very conscious to their blog webdesign, some just want a simple and clean template while others want a stunning template depending on what their blog is all about. One of the most common factors a visitor stay longer in a blog is the webdesign and of course the web content. Speaking of which, I myself had a hard time deciding which background I should use, then I found this plugin that will let you have a multiple background at the same time with every reload of the page, this plugin uses a very simple javascript.

A Live Demo is implemented in this post page.

Step 1 : Navigating
Go to Blogger
Template
Backup your Template
Press Edit HTML

Step 2 : Adding the Code
Search for </head>
Copy the following code and paste it before </head>

<script type='text/javascript'>
var banner= new Array()
banner[0]='IMAGE-URL'
banner[1]='IMAGE-URL'
banner[2]='IMAGE-URL'
banner[3]='IMAGE-URL'
banner[4]='IMAGE-URL'
var random=Math.floor(5*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background-image:url(&quot;&#39; + banner[random] + &#39;&quot;);&#39;);
document.write(&#39; background-attachment:fixed;&#39; );
document.write(&#39; background-repeat:no-repeat;&#39; );
document.write(&#39; background-size:100%;&#39; );
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Step 3 : Saving
Save your Template

Note :
Replace IMAGE-URL with the URL of your background image.
You may add more banners by addding banner[5]='IMAGE-URL' to the code, just don't forget to change the Math.floor value when you're adding and removing banners.

Is this plugin useful? Please do leave your comments below!

Rate This Article

Thanks for reading: Background Changer For Blogger, Stay tune to get latest Blogging Tips.