How to Design & Upload Custom Background to Blogger

How to Design & Upload Custom Background to Blogger

This is actually easy stuff to do all by your own to give a customized look and feel to your blog based on the theme of the content. Pixlr, Photoshop etc. plenty of photo-editing software are available these days through which you can make a customized background image for your blog.

Let’s make a quick background image for your blog:

We are making this in Photoshop by the way Pixlr got similar tools as of Photoshop and is an online free to use software.

Go to File > New and make sure to keep the following sizes.

Width height of blogger background image

Now browse over the web and try finding some digital artwork website also known as digital scrapbooks that allows downloading awesome artwork absolutely free. Try finding something that contextually matches with your blog. Before you download or copy and use the artwork, be careful and go through the terms of use and the type of creative commons under which the artwork is categorized.

While using random elements to make a custom design you need to follow the measurements, which are as follow. The white part is where you content will appear.

Dimensions of blogger background

Wrap the content section with some nice decorations to make it more prominent to the visitors and save it in jpeg format.

Designing & uploading customized background to blogger

Now we need to upload the background to our blog, ready for this?

1. Upload your image to some free image hosting site such as imagur.com. Make sure the image shall remain on its original size.

2. Take the URL of the uploaded image and replace it with the “Image URL” in the code below.

</pre>
<p style="text-align: justify;">body { background-image : url("Image URL"); background-position: center; background-repeat: no-repeat;  background-attachment : fixed; }</p>

<pre>
<p style="text-align: justify;"></style></p>
<p style="text-align: justify;"><script type="text/javascript"></p>
<p style="text-align: justify;">var div = document.createElement('div');</p></pre>
<p style="text-align: justify;">div.setAttribute('style',"position: absolute; left: 0px; top: 30px; z-index: 50; width: 150px; height: 45px;");</p>

<pre>
<p style="text-align: justify;">div.innerHTML = '<a target="_blank" href=" "></a>';</p></pre>
<p style="text-align: justify;">document.getElementsByTagName('body').item(0).appendChild(div);</p>

<pre></pre>
<p style="text-align: justify;">

3. Login to your blog and click Design, which could be found in the right upper corner.

4. Click on Layout in the left column and then click on Add a Gadget and a popup window with multiple options will appear where you need to click on HTML/JavaScript.

5. Copy the above given code with your uploaded images URL in it and paste it in HTML/JavaScript box and click Save.

HTML/JavaScript Gadget Screen Blogger

Leave a Reply