How to add an ICON IMAGE next to a Hyperlink?

ADD-ICON-TO-HYPERLINKAdding 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"

audio_alte_mailfile_avifile_bmpfile_docfile_giffile_jsfile_movfile_mp4file_mpgfile_pdffile_phpfile_pptfile_rarfile_xlsfile_xmlfile_ziphyperlink iconlink_go

 

 

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,

Icon next to hyperlink

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

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 »

3 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Great trick mohammad.
    but is there a way to give all the links there own icon automatically without adding class="mbt-hyperlink-1" to every link

    for example the links with .zip have a file_zip.png icon
    the links withe .xml have afile_Xml.png icon
    ect.

    thank you

    ReplyDelete