How to Add Image Icons Next To Hyperlinks in Blogger

Even wondered how they show up an image or an icon next to a link in their blogs? I was also thinking about that. I tried to put image alongside the hyperlink, but it did not appear properly or it was not rendered properly at all. So, I started crawling the web to find a solution, and learned some useful information about the same. i am going to share these info with you, so that you can also implement it in your blog or website. Here is how you can do this in following steps:

Step 1: Login to your blogger account. Go to your Dashboard. Click on your appropriate blog, where you want to apply this. Click on Template tab.

Step 2: Then Click on Edit HTML and Click Proceed. (You can do this by following Blogger > Design>  Edit HTML in older interface of Blogger.)

Step 3: Check the "Expand Widget Templates" Box and when expanded, search for the following (you can press Ctrl+f as a shortcut to search a string),

]]></b:skin>

Step 4:  Just above it paste the code given below:

.latl-hyperlink-1 { 

background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 


}

You need to change the ADD YOUR ICON LINK HERE to your hosted icons link. You can host your icon or image file to blogger itself or to picassa, photobucket or such free image hosting platforms. Then you copy the image link and paste in here.

If you wish to use three or four icons simply keep on adding the same CSS code given above by changing only the digit number i.e. 1, 2 , 3 , 4 like following:

.latl-hyperlink-1 { 

background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
.latl-hyperlink-2 { 

peat 0px 0px; 
padding:7px 0 0 25px; 
}
.latl-hyperlink-3 { 
background: url(ADD YOUR ICON LINK HERE) no-r
e
background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

g:7px 0 0 25px; 
}

.latl-hyperlink-4 { 
background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
paddi

n

and so on...

Step 5: Save your template and you are almost done.

How to do it?

As an example, suppose you wish to provide a link to your user to download a file from somewhere and you want to display an image next to the download link you are providing. To do so, you simply need to put the CSS class to the link i.e class="latl-hyperlink-1"  as shown below,

<a  class="latl-hyperlink-1" href="http://abcdzx.com/files/software.abc">Download The Software</a>

Remember that, you have to put do this in HTML mode when you are editing your post.After you do that, you will see the Icon appearing next to your link. Thats it. Voila! You are a genious!! Enjoy....