Add 'Icon Before Your Links' in Blogger

Whenever you add a download link in blogger you can't tell your visitors that what is its extension or what is the file so today i came with another awesome blogger tutorial to put an icon before your download link so the visitor understand in the first look that what is the file extension they are downloading and they understand that whether they have the program for which the file is designed.

How To Add Icon

• Goto Blogger
• Click Template
• Goto Edit HTML by Clicking it
• Search For ]]></b:skin>
• Just Above it Paste The Following Code

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

• Now Use The Following Following images or Search For Your Vector Image on Google

• Replace ADD ICON LINK HERE With Your Icon image Link
• If You Want To Use More Icon Then Simply Change The Number Like This:

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

How To Add it in Posts

To add it in posts simply change the class (i.e class="Guidetivist-hyperlink-1")

as shown below

<a  class="Guidetivist-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,