--> How to add an ICON IMAGE next to a Hyperlink? | Experience Lab - Online business creation and development guide for bloggers and startups

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. I...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How to add an ICON IMAGE next to a Hyperlink?
How to add an ICON IMAGE next to a Hyperlink?
http://lh4.ggpht.com/-RD04bqEBwbM/Tff4L3e1vrI/AAAAAAAAD0w/oiXcQgdos04/ADD-ICON-TO-HYPERLINK%25255B2%25255D.png?imgmax=800
http://lh4.ggpht.com/-RD04bqEBwbM/Tff4L3e1vrI/AAAAAAAAD0w/oiXcQgdos04/s72-c/ADD-ICON-TO-HYPERLINK%25255B2%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/06/how-to-add-icon-image-next-to-hyperlink.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/06/how-to-add-icon-image-next-to-hyperlink.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy