Advanced Search Module

Close Search
 

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.

Related posts:

  1. Show Date before each Post in Blogger
  2. Embed Comment Form below post in Blogger
  3. Social Bookmarking widget for blogger
  4. Related Posts Widget For Blogger with CSS
 
 

28 Responses to “Add Icon Before Post Titles”

  • bloggErdal August 9, 20089:58 am

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

  • Mohamed Rias August 9, 200812:38 pm

    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

  • DanielPK August 16, 20087:58 pm

    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!

  • Mohamed Rias August 17, 20084:20 am

    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

  • DanielPK August 17, 20087:16 am

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

  • Mohamed Rias August 17, 20089:45 am

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

    regards,
    Blogger accessories

  • DanielPK August 19, 20089:30 pm

    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

  • Tracy Rainwater August 19, 200810:33 pm

    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.

  • ????? ???????? August 25, 200810: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

  • The Author August 26, 200812:23 am

    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.

  • Sheik August 26, 20083:24 am

    Hi ,

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

    regards,
    Blogger Accessories

  • The Author August 26, 20085:00 am

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

  • Admin October 5, 20081:09 pm

    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.
    srikanth

  • Abhishek October 9, 20084:47 am

    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

  • Alok October 9, 200812:29 pm

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

  • Vikki October 9, 20082:15 pm

    Brilliant this worked really well in my beauty blog

    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
    :)

  • Brazen Lass October 22, 20087:55 am

    hi, thanks for the hack!

  • Aman Dhingra October 22, 200812:46 pm

    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.

  • The sword January 14, 200911:32 pm

    thanx Mohamed

  • Shafar January 21, 20095:09 pm

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

  • dlcomplete January 29, 20098:19 am

    Thanks nice tutotrial i love your tuts.

  • Hendriono February 24, 200910:06 am

    its nice tuts friend… greet from indonesia…

  • tipsandcara March 25, 20094:54 pm

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

  • Sasa June 1, 20098:03 pm

    Brilliant this worked really well in my beauty blog

  • Sasa June 1, 20098:18 pm

    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

  • kith June 13, 200910:43 am

    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!!!!

  • darwinjalen May 28, 20105:40 am

    Gorgeous blog. I liked it.
    its excellent.

  • Caciocode
 
 

28 Responses to "Add Icon Before Post Titles"