How to Create a Background Image in Blogger?

Adding a background image to a blogsite is one way to enhance its appearance. It helps the site to look attractive and unique. Blogger did not provide a menu or button to easily add our own images, however, there are other ways to apply this in our blogsites.

Here are the steps.

1. Select the image that you want to add as a background in your site. The usual size for a background image is 1024 (width) x 768 (height) and in a jpeg format.

2. Copy the url or the direct link of the image (ex. http: //imageshack.us/image.jp). If you want to use your own picture, you need to upload it first to free file hosting websites, like imageshack, photobucket, tinypic and imageboo.

3. Go to your Blogger account - Dashboard - Layout - Edit HTML and click 'Expand Template Widget'.

4. Find the code below.

body {
background-image: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Change the code above with the new code below.

body {
background-image: $bgcolor;
background:#fff url("http://img72.imageshack.us/img72/1516/pen4bg.jpg");
background-position: top-left;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

6. Save the template and view your blog.

That's all! You have already created a background image in Blogger / Blogspot.


Note:

1. For background-position, you can choose other options such as center, right, left, bottom, top, top-right, etc.

2. For background-repeat, you can choose other options such as repeat, repeat-x and repeat-y.

Best Three-Column Blogger Template Tutorial

I often see some blogsites having a three column templates and I begin to wonder, 'How can I also do that?'.

I'm actually using Minima Template in Blogger or blogspot with 2 columns. I really want to expand it so I can maximize the space and thus I can place more widgets on it. I already looked around because maybe there are buttons that must be clicked in order to create a 3 column template for my blogsite. But in this case, there are no buttons to be clicked.

There are some ways, but you must do it manually in 'Edit HTML', where you need to change or add some codes in your template. But no worries, it doesn't require a blogger to be a programmer in order to do the coding. Everyone can possibly turn their 2-column blogsite into a three column one (like this blogsite).

I try a lot of online tutorials, but this site gives the best result. The templates are also for free and the instructions are easy to follow, even if you're just a newbie like me. So, if you also want to create a three column in your blogger template, I suggest to use this link, Zimbio Three-Column Template.

How to Hide Blogger Navigation Bar?

Improving my own blog site is fun and challenging, yet technically complicated especially for beginners, like me. But still, it feels good that I succeeded in applying some changes in this site, like hiding the Blogger Navigation Bar or Navbar. I think, changing or adding some codes in the template requires full concentration and patience from a blogger.



Some blogger may want to remove or delete the horizontal navigation bar on the top part of the blogsite, but I suggest to just hide it, for it might be a violation of blogger rules. Better check their policies for more detailed information.


Here are some easy steps to hide your Blogger Navbar.

1. Log in to your blogger account.

2. Go to Layout and click Edit HTML.

3. It is important to save your file first. You can click on Download Full Template to have a back up of your file.

4. Look for the body in your template.

5. Above the body, insert or copy & paste the code below.

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

5. The code should look like this.

#navbar {
height: 0px;
visibility: hidden;
display: none;
}


body {
background-image: url();
background-repeat: no-repeat;
background-position: right bottom;

6. Save your template and view your blog.

You can always hide or show the blogger navigation bar whenever you want. And if you want to show the navbar in your blogsite, simply delete the code you inserted above the body.