How to add an ICON IMAGE next to a Hyperlink?

 

 

You can also use icons of your preference and [a href="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" target="_blank"]save the Images on blogger[/a].

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 this,

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

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

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

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

and so on..........

    5.  Save your template and jump to the next part of the tutorial

How it works?

Now for example if you wish to provide a link to your user to download an Ebook, you simply need to add the CSS class to the link i.e class="mbt-hyperlink-1"  as shown below,

<a  class="mbt-hyperlink-1" href="http://xyz.com">Download SEO Guide Tips</a>

After you paste the above link in the HTML mode of your blogger editor and publish the post, you will see the Icon appearing next to your link as shown below,

Hope this was clear. If you needed any help just let me know. Peace and blessings! :)

Source: http://www.mybloggertricks.com/2011/06/how-to-add-icon-image-next-to-hyperlink.html