An illustration is as follows:

All you have to do is:

1. In blogger, go to Layout, Edit HTML

2. Control +F this code:     .sidebar li, #BlogArchive1 li {

3. Below it, there should be this code: line-height:

4. Change the value according to how large you want the space to be.
And you're done!

Paste this following code just below the opening tag.

#main {
background-image: url("http://YOUR-URL-HERE.COM");
width: 661px;
margin: 7px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;

Replace 'YOUR URL HERE' with the URL of your picture. You need to host the picture somewhere, like on photobucket or tinypic, then obtain the URL of the picture from there.

Point to note: If your picture is smaller than the 'post' space, it will 'tile' itself and become a repeated picture. This effect is good for blog backgrounds which you don't want to be a flat, solid colour, but want some texture for it.

Step 1:  Go to your blogger dashboard, select layout, then edit HTML, then Edit template

Step 2: Paste the code in red, in between the blue coloured ones.

-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

Click SAVE.

and you're done!

1. Click 'Edit HTML' in the Blogger Layout page.

2. Search(Ctrl+F) your template to find the following codes:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

3. Replace the above code as given below:

#blog-pager-newer-link {
float: left;
display: none;
}

#blog-pager-older-link {
float: right;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Save the template and you're done!

Another tip: If you want to hide any part of a template, just paste 'display: none;' below the opening tag. Eg. If you do not want a footer for your blog, just type 'display:none;' right below ' #footer { '.

Here comes the tough part. As we work with blogger in every website, we encounter all sorts of errors and problems with blogger. In addition, we find out interesting ways to solve template issues and more efficient ways to solve problems.

Hence, we would like to share our experiences and tricks in blogger with all of you.

In this post, we will tackle one of the most time-consuming problems in blogger. They are the "bX-bliced" errors. They can come in the form of: "bX-y6cz0v", "bX-8dyqz0", "bX-si9ejx", and many others. This usually occurs when you are uploading a new template. After some research, we have found that this solution works 99% of the time.

1. Open the XML template with Notepad or any other XML editor like Dreamweaver.

2. “Ctrl + F” and search for the word "widget id"

3. Replace the "b:widget id='Anything1'" to "b:widget id='Anything11'" (eg "b:widget id='Header1'" to "b:widget id='Header11'"). You can replace the number into any number you want, but it should be double digit. (eg. change 1 to 11, 2 to 22 and so on)

4. Save the file. Upload the template by either uploading the xml file or cut and paste as usual.

And you're done!