Add Icon Before Post Titles

Today I am going to tell how to add Icons to post titles. You would have noticed in some wordpress blogs like Dezzain and other famous blogs using Icons before the Post titles. Never Wonder how to do or Whether only WordPress has this feature. It’s really an easy hack and I will help you to implement this.

Let us start :

Step 1 :

First you need to create an image / Icon which you would like to show before each post title. You can create the image either in Photoshop or in Online Image creators. After creating the image upload it to blogger or any other image hosting sites like imageasck.us , photobucket , etc . Now copy and paste the image url in a text file.

Step 2 :

You need to create simple HTML code for your image like below ,

<img src=” your Image Url ” />

change the text in red with your image url. Now we have successfully created the code for our image.

Step 3 :

Now let us see how to implement the image code in blogger Template. Login to your Blogger Account , then go to Layout subtab and then to EDIT HTML tab. Before we start first take a backup of your template . Put a check in expand widgets box and search for the code in red .

<b:if cond=’data:post.url’>

<a expr:href=’data:post.url’><data:post.title/></a>

If you want to show the image before post title , you need to add the image code after the red line.

If you want the image to appear after post title then paste the image code after the green text.

After doing this preview your template , Then save it.

I hope you would have liked this hack. If you have any problems in implementing this hack ask in comment form I will help you.

Tomorrow I will come with another nice Blogger Hack , If you don’t want to miss it then subscribe to our RSS feed.




If you like this article , then please help us by bookmarking

39 Responses to “Add Icon Before Post Titles”

  1. can i make automatically add aouthor image to any post.i will wait ur reply

  2. BloggErdal Welcome to Blogger Accessories ,

    Just put the author image url as mentioned in the Hack above. if you have Problem let me know , …

    regards ,

    Blogger Accessories

  3. Hi mohamed! i really need your help, can you please check my blog, i followed the great tutorial you provided…the icon did show up, but ontop of the post title?? what could be the problem? is it my blog width? i tried different methods, but non worked, please i really appreciate if you could help me, thnx

    http://www.technologypublic.blogspot.com

    btw, is there something wrong with your website layout? am using Firefox latest version and it seems that you layout is off-set to the left!

  4. Hi DanielPK ,

    I downloaded your Grid Focus template from Blogger Buster. You need to change some CSS code inorder to make the image appear before post title.

    in your template EDIT HTML page search for

    .post h2
    .post h2 a

    now replace that two lines with this code

    .post h2{line-height:1.2em;margin-bottom:7px;font-size: 18px;color:$titlecolor;}
    .post h2 a{padding-left:70px;margin-top:-60px;display:block;outline:none;color: $titlecolor;margin-bottom:40px;}

    then usual put the image url after

    <b:if cond='data:post.url'>

    now It must work right. I tested in Firefox 3.0 and IE8 . You can check my demo blog http://ebooks-plaza.blogspot.com/ .

    If you still have any problem , ask here.

    regards,
    Blogger Accessories

  5. Thank you very very much, it worked awesomely…thnx again

  6. You are Welcome my friend. If you need any help just leave a message .

    regards,
    Blogger accessories

  7. Just wanted to know…if i can have the permission of copying your tutorials to my page…while linking back to you. is it possible? if you have a banner which i can use for linking, that would be appreciated.

    I’ll be waiting your response.

    Thank you

  8. Hi. I am hosting my blog myself so I do not have the Blogger widgets feature. Will this work in my case? I am using a modified version of Minima. Thanks.

  9. शैलेश भारतवासी 25. Aug, 2008 at 3:46 am

    hi,
    Mohamed Rias !

    I am owner of many cxommuntiy blog and I aggregate all the blog to my sites http://www.hindyugm.com

    Since there are more than one members to my blogs, I want to show images of writer before his post titel.. How can it be possible.. please write me as tutorial… you can mail me also at bharatwasi001@gmail.com

  10. Trying it exactly like you said, but bogger keeps giving me an error…any ideas why?

    Was trying to add this photo http://www.flickr.com/photos/29887776@N02/2798312258/

    as the icon begining each Title post.

    blog is here http://battlestandard.blogspot.com/

  11. Hi ,

    Send me your template to my email mohamedrias1103@gmail.com , I will add this hack for you.

    regards,
    Blogger Accessories

  12. Took me a hour, but I figured it out…thanks you so much for the offer though!

  13. hi dude…i tried this hack and successgult installed the image. however, in the post title the image is on the top and title is right below . these are not coming in the same line.cud plz chk http://idledownloads.blogspot.com

    srikanth

  14. Hi Rias ,,

    Again I m need of ur Help…

    Can u please help me to sort out one of my problem…

    I need a widget for ” Continue Read ” options… As like u and many blogger use on theres blogs.. it will be really easy for me to and my readers..

    thanks …

    Abhishek

    U can chek my blog @
    explode-profits.blogspot.com

  15. plz help the read more link is displaying at the end of complete post??? what to do??

  16. Brilliant this worked really well in my beauty blog http://www.crazyaboutmakeup.com

    I am still messing round with the firebug reloaded template a bit to make it more me, but your little hacks are adding some very cool elements to my blog

    Thank you very much
    🙂

  17. hi, thanks for the hack!

  18. hi yaar can you please tell me how it can be possible if i want diffrent image for each category.
    Waiting for your reply
    Thanks.

  19. This hack will be very useful to the blogs having multiple authors. They can show their own unique picz!

    Tips Blogger dot Com

  20. Thanks nice tutotrial i love your tuts.
    http://www.dlcomplete.com

  21. its nice tuts friend… greet from indonesia…

  22. once again, i would like to say thank you.
    i have try it. and it work

  23. Brilliant this worked really well in my beauty blog http://automobilipolovni.blogspot.com

  24. How can I put Icon before post titles. I read you post but I have another code
    cond=’data:blog.pageType
    What I do?
    Please give me complite definition!
    Thanks

  25. can this be applied if you have more than one writer for your blogger site?

    we are 6 writers for http://kpopsites.blogspot.com how can we place our picture before the title of our posts to distinguish who wrote who?

    all the best!!!!

  26. salam alaykom Mohamed

    how to make the icon before the post title changed regarding to the label of that post,
    suppose that the post is under news label
    so i want my icon to be news.jpg
    if my another post is under video label
    so my icon should be video.jpg

    i dont know how to script it but it should be something like this:

    else

    so if i have 7 post in my blog page,
    every post should display different icon before its title depend on their label for each post.
    please help me in this, i will be very thankful if you can help me
    im waiting your response ASAP.

  27. walaikum salam Ahmed,

    Can you send me your template to my email id. I will try to include that hack to show particular image in labels page. Please send me exact labels name along with that attachment.

    regards,
    Mohamed Rias

  28. where is your email?
    i click on contact us, but page not open

    anyway here is my template:
    http://www.2shared.com/file/6380668/a2d06074/mytemplate.html

    please reply to my email as it shown above.
    thank you brother…

  29. i need nice template for my blog plzz

  30. @ heba ahmed

    Please make template requests here :

    Converting WordPress themes to Blogger Templates

    regards,
    Mohamed Rias

  31. thank you for this tip, i will sortly apply into my blog.-

  32. I Am Unable to add a small image icon before the post title as the image gets stretched ..

    Any help ?>?
    Thanks

  33. Excellent site, keep up the good work

  34. cnt done…
    may i ask hw to do it?

  35. […] This post was mentioned on Twitter by SysComm Int., Genius and Hemant Atrish, Deepti Kapoor Atrish. Deepti Kapoor Atrish said: CNBC to air 'Planet of the Apps' on January 7 – 'CNBC to air 'Planet of the Apps' on January 7.. http://bit.ly/7eY8http://ow.ly/16eoKp […]

  36. great post, thanks for sharing

  37. Hi..this is wonderfull ..but what i need is to show icons before post titles different for every label post.

    I show on my home page just titles and lots of them have different label.So is it possible that for example i make one post called techie(with labbel for example tech) and there is shown one icon and second post title has name blogger (with labbel for example blog) and have different icon.I hope so you got what i m asking 🙂

    thx

Leave a Reply

You must be logged in to post a comment.