Add Icon Picture Image Before/After Blogger Post Title



How to add an image before the blogger posts title as you would have seen it many blogs or seen author pictures to be dispalyed before the beggining of the post title.It really looks good to the blog,and one of reader ask it how to get this image to be displayed in post title.So i thought of the holding an tutorial on it.

Read on how to add favicon in your blog url and newspaper style first alphabet in blogger posts,if you are not searching for this trick.

Now How to add image before each blogger post title:-

Log in to Blogger Go to Layout -> Edit HTML -> Click on Expand Widget Templates
Press (CTRL+F) and Find below code in the template:


<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>


Now you have to add below line in between above codes.


<img src="http://www.thescifiworld.net/img/hotfeatures/avatars44.jpg" style="border-width: 0px;" />


Please change the url in red in above with your image url which you want to display before blogger post title.

If you add the line after

- red part of code, my picture will be ABOVE
- green part of code, my picture will be on the LEFT
- yellow part of code, my picture will be on the RIGHT
- blue part of code, my picture will be UNDER







Now i am sure you will easily add the image wherever you want to show it in the post title.Best Of Luck !

13 comments:

H said...

Nice post! Now how do you put a different picture for each author?

Anshul said...

Sorry i forgo to tld one more way to implement,the image link code which you add between the template as i said above dont add it there,instead add that code in title section of post where you write your title of the post and after that code write our ttle and place any mage you wanna use in codes.

Gersh said...

I'd like to know how to add an icon for a specific post, related to which labels i use. sort of like a category

Anshul said...

@gersh not able to undertand what you exactly saying.

Youth Ki Awaaz said...

Hey Anshul, I want to put a pic only to one post, not to all. What should i do for that?

Anshul said...

@youth the image link code which you add between the template as i said above dont add it there,instead add that code in title section of post when you write post of particular post you want to show image.

Sakthi Dasan said...

How to set this icon only to the new posts posted?

Anshul said...

@sakti no way instead add manually to title you want or not too.

phani kumar said...

thank u very much my dear friend

Home Revise said...

Hi Ansul,we are starting a new blog on blogspot and need your help.How to add social media icons to my blog in easy steps becoz I am new in blogging.How to add site meter,How to add comment box,HOW TO ADD Read more link,How to add subscribe,How to add About Us instead of My Profile,How to add translation.Pl guide.My email ID latpatesunder@gmail.com.THANKS.

Anshul said...

@home just find for tutorila on addinng socila icons.Just go to sitemeter register there get codes and add in HTML/Javascript widget from blogger layout.Read more hack is provided by blogger itself now so just update your editor from blogger settings.And for translation also do same as sitemeter.

gunawan said...

good,
thank you for the information,
This was helped,
spirit! ! ! ! !

http://technology-sae.blogspot.com/

http://job-finance.blogspot.com/

Safwan Ahmad said...

Thankyou for info. I often use tables to insert image in title tag but this gives a bad impression when read more is hovered on!

Post a Comment