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.