Adding an Image Beside Post Title

How to adding a small image at the post title ? here is the steps.

Step #1

You must have a small image image, for example like this :



Step #2

Upload your small image to image hosting. For example : you can upload your image to blogger, Yahoo geocities, Google pages, or another free image hosting. If you has been uploading your image, please get the image code. for example : I'm has been upload an image to tinypic.com and the image code is :

http://i42.tinypic.com/mlii5l.jpg

So that the picture can appear at your blog, you must create the code like this :

<img src="http://i42.tinypic.com/mlii5l.jpg"/>


And the image will appear like this :



Step #3

Add the image code to your template code. Here are the steps to add image code to your blog.

Or, do you still using old (classic) template ? Never mind, bellow is the steps adding image code to classic template :

1. Login to blogger with your ID.

2. At the dashboard page, click Template.

3. Click Edit HTML.

4. Back up your template code (important!).

5. Find this code :

<blogitemtitle$>

6. Replace your image code beside above code :

<img src="http://i42.tinypic.com/mlii5l.jpg"/> <blogitemtitle$>


7. Click Save Settings button.

8. Done. Now your every post title will appear with your small image.




This is for new blogger template :

1. Login to Blogger with your ID.

2. At the dashboard page, click Layout.

3. Click Edit HTML.

4. Back Up your template code (important!).

5. Please mark the little box beside Expand Widget Template. Wait for a moment





6. Go to your template code, and find the code like this :

<a href="data:post.url"><data:post.title></data:post.title></a>
7. Add your image code like this :

<a href="data:post.url"> <img src="http://i42.tinypic.com/mlii5l.jpg" /> <data:post.title></data:post.title></a>


8. Click SAVE TEMPLATE button.

9. Done.

Now your every post title will appear with your small image.