Jul 7, 2008 in

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.

Check Out This Popular Posts

27 Responses So far
gravatar
bloggErdal
on August 9, 2008 at 2:58 AM  

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

gravatar
Mohamed Rias
on August 9, 2008 at 5:38 AM  

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

gravatar
DanielPK
on August 16, 2008 at 12:57 PM  
This comment has been removed by the author.
gravatar
DanielPK
on August 16, 2008 at 12: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

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!

gravatar
Mohamed Rias
on August 16, 2008 at 9:20 PM  

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

gravatar
DanielPK
on August 17, 2008 at 12:16 AM  

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

gravatar
Mohamed Rias
on August 17, 2008 at 2:45 AM  

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

regards,
Blogger accessories

gravatar
DanielPK
on August 19, 2008 at 2: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

gravatar
Tracy Rainwater
on August 19, 2008 at 3: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.

gravatar
शैलेश भारतवासी
on August 25, 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

gravatar
The Author
on August 25, 2008 at 5:23 PM  

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/

gravatar
Sheik
on August 25, 2008 at 8:24 PM  

Hi ,

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

regards,
Blogger Accessories

gravatar
The Author
on August 25, 2008 at 10:00 PM  

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

gravatar
Admin
on October 5, 2008 at 6:09 AM  

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

gravatar
Abhishek
on October 8, 2008 at 9:47 PM  

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

gravatar
Alok
on October 9, 2008 at 5:29 AM  

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

gravatar
Vikki
on October 9, 2008 at 7:15 AM  

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

gravatar
Brazen Lass
on October 22, 2008 at 12:55 AM  

hi, thanks for the hack!

gravatar
Aman Dhingra
on October 22, 2008 at 5:46 AM  

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.

gravatar
The sword
on January 14, 2009 at 3:32 PM  

thanx Mohamed

nice blog

http://egyphoto.blogspot.com/

gravatar
Shafar
on January 21, 2009 at 9:09 AM  

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

Tips Blogger dot Com

gravatar
dlcomplete
on January 29, 2009 at 12:19 AM  

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

gravatar
Hendriono
on February 24, 2009 at 2:06 AM  

its nice tuts friend... greet from indonesia...

gravatar
tipsandcara
on March 25, 2009 at 9:54 AM  

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

gravatar
Sasa
on June 1, 2009 at 1:03 PM  

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

gravatar
Sasa
on June 1, 2009 at 1: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

gravatar
kith
on June 13, 2009 at 3: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!!!!

Post a Comment

Custom Search
Web Analytics