Insert a picture or image beside the Blog Post Title

By: Unknown on 8:47 AM

We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title. This guide will explain how this can be done.

The image we are talking about has to be small, perhaps about 20px in width. But for the purposes of this guide, we shall also use a bigger image double that size, to let you see the difference.

First, we have to create that image. If you have an existing photo or picture, you can use an image editor like Google's Picasa to crop or resize it to a small image size. After that, upload it onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.

Example 1

In this first example, we use an image of 20px by 20px. Login to Dashboard and go to Template -> Edit HTML. In the Minima Template that we have, we would see these lines:-

.post h3 { margin:.25em 0 0; padding:0 0 4px; font-family:trebuchet ms; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

If you are using a different template, you can still locate .post h3 and although the styles defined may vary slightly, the way to insert the image is the same. The codes that should be modified or inserted are highlighted in red.

.post h3 { background:url(IMAGE URL) no-repeat; margin:.25em 0 0; padding:0 0 4px 30px; font-family:trebuchet ms; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

The result we see is this image on the left of the Post Title:-



The IMAGE URL is the location where the image is uploaded, beginning with http:// To test whether the link works, enter that into a browser and press Enter. You should see that image without being prompted to download it.

We adjusted the padding to shift the Post Title. The padding is the space between the border and the element. Our intention here is to add a space between the left border of the Blog Posts and the start of the Post Title. How the value works is this. In a shorthand declaration, the padding property can take these forms:-

.post h3 {padding: 10px;}

This indicates that the padding is 10px on all the four sides of the Post Title.

.post h3 {padding: 10px 20px;}

Here, the top and bottom padding is 10px, and the left and right padding is 20px.

.post h3 {padding: 10px 20px 30px;}

Where there are three values, the top padding is 10px, the left and right padding is 20px, and the bottom padding is 30px.

.post h3 {padding: 10px 20px 30px 40px;}

This declaration style is what we use to adjust the Post Title to the exact position where we want it. With 4 values, the top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.

As you would understand by now, since our image width is 20px, we added a left padding to the Title to give a space of 30px between the border and the start of the Post Title. You would have to change the values of this padding setting to cater to your image size and blog design. Always Preview the Template and do not save it until you are happy with the change.

Example 2

In this example, we use an image size of 40px by 40px. The modification to the template code is the same as above. However, our paddings will have to take care of this larger image. To have this bigger image on the left side of the Blog Post Title like this:-



We can change the padding to this:-

.post h3 { background:url(IMAGE URL) no-repeat; margin:.25em 0 0; padding:10px 0 4px 50px; font-family:trebuchet ms; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

We set a top padding (space above the Post Title) in addition to the left padding. The Title is aligned to the middle of the picture. If the Title is to be aligned to the bottom, we would have increased the top padding from 10px to 20px. Experiment with your padding settings to align the Post Title. Preview the Template and save it if you like the new layout. Refresh the Blog and you will have an image displayed beside each of the Post Titles.

@ Copyright 2012 Pradeep Lodhi (ethical hacker)