How to add an ICON IMAGE next to a Hyperlink?

Adding icons or images next to Hyperlinks indeed brands your links. The tutorial today will let you add an icon next to any link you want. It is different from our previous post where I shared how can you add icons to hyperlinks using CSS3. Most of you requested that how can you add an icon next to just a simple URL with no file extension, so this post will answer all your questions.

Adding Icons Next To Hyperlinks in Blogger

1. Go To Blogger > Design>  Edit HTML

2. Check the "Expand Widget Templates" Box

3. Search for this,

]]></b:skin>

    4.  Just above it paste the code given below,

 

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

Make these changes:

• Replace ADD ICON LINK HERE with the URL of your icon. You can use any of the icons below or all of them. Right Click on any icon and select "Copy Image Location" or "Copy Image URL"

 

 

You can also use icons of your preference and save the Images on blogger.

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

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 6/15/2011