How to Add Background to 'Post Title' on Blogger

Assalamualaikum.. 

Hello there. Once again I find a more attractive thing  than working on my exam, and here I am posting again!
However, I am so happy tonight to share with you all another blogging tips that I just learn and feeling happy with the result: adding background to my post title. I know somehow this is sounds silly, how come adding background can make you happy? Well, in my case it does.

The main concept of my blog template is simplicity which is brought by the basic template design powered by blogger with some additional of purple nuance decoration (purple is my ever favorite color!). I have to say that simplicity is my style of designing, however I do not like emptiness. Playing with only two colors somehow can bring emptiness, which I found in my previous blog template as shown below:

Too much gap :(

 As you see there is an awkward empty gap between the 'tab' and the 'post title'. I was kind of sad with it since it doesn't suit me. I know I have to add something and after a glimpse of thinking I decided to add background to the post title, so it become more alive like this:

More alive, right?

How do I do that? Well, thanks to http://www.blogbulk.com who showed me the way. Now it my turn to show you how :)

What you will have to do:

1. BACKUP YOUR TEMPLATE BEFORE MAKING ANY CHANGES, just in case (As what usually suggested, even though I don't do this that much :p)
2. Prepare the picture that you are going to use as your background, make sure you adjust the size of height and length of your picture with those of 'post title'
3. Upload your selected picture to a free web host (photobucket, picasa, flickr, etc.) to get the URL address
4. Go to Template-->Customize-->Advanced-->Add CSS  and paste the html below:

.post h3 {
background: url(insert your picture URL here); background-repeat:no-repeat;
height:55px;
margin:.25em 0 0;
padding:14px 40px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

in red, add the URL of the picture inside the caps. You can also do some additional setting

in purple, change the value (number) according to your picture height. This is to tell blogger that the picture has certain height

in green, change the value to adjust the position of your post title with the background up or down. Higher value means down and less means up.

in blue, change the value to adjust the position left or right. Increase value means right, less value means left.

Pretty easy, right?? What you have to do is to be really careful and creative! Careful with the html code, especially for newbie like me :) and be creative with the design! Do whatever you like with it!

Alright, hopefully what I share with you today will help even a bit.

Thank You very much  and have a nice day :)