Adding icons next to hyperlinks helps your readers to detect the file format easily.You can add this icons very simply and easily with using css.If your link is pointing to a mp3 file then it will add a music symbol next to the link and so on.This amazing trick was bloggerized by Mohammad Sir Of MBT,So I gave all credits to MBT Blog.


How To Add These Icons To Your Hyperlinks?


  • Go To Blogger > Design> Edit HTML
  • Download your template.
  • Search for this,


]]></b:skin>



  • Just above it paste the code given below,


a[href*='.js'] { 
background: url(http://4.bp.blogspot.com/-V8JUArvVlDg/TfUbt5n91dI/AAAAAAAADyU/1IBTSCCOqqs/s400/file_js.png) no-repeat 0 0; 
padding:7px 0 0 25px; 
}
a[href*='.gif'] { 
background: url(http://3.bp.blogspot.com/-cm5RFNkVp00/TfUb5CerXjI/AAAAAAAADyc/2kTlh1gZtNA/s400/file_gif.png) no-repeat 0 0; 
padding:7px 0 0 25px; 
}
a[href*='.doc'] { 
background: url(http://1.bp.blogspot.com/-ZH-3gjdNNvk/TfUbtq9_ZfI/AAAAAAAADyM/5faoK_0PTWY/s400/file_doc.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='.rar'] { 
background: url(http://4.bp.blogspot.com/-uy-ymIWEbsU/TfUb6fTzK0I/AAAAAAAADy8/1F6rIj9GCyc/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px; 
}
a[href*='.zip'] { 
background: url(http://3.bp.blogspot.com/-W4uO8Fg9m7c/TfUcNyXIdqI/AAAAAAAADzU/fBOxrHNQ4Zw/s400/file_zip.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='.mp4'] { 
background: url(http://4.bp.blogspot.com/-sz4_aCOdfzA/TfUb5RWH7ZI/AAAAAAAADyk/VhWkhTM8GCc/s400/file_mp4.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='.php'] { 
background: url(http://3.bp.blogspot.com/-izMrgCy23Mc/TfUb6E3vLDI/AAAAAAAADy0/QhQdYov4ieA/s400/file_php.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

a[href*='.xml'] { 
background: url(http://2.bp.blogspot.com/-Etxu23Xq01M/TfUcM1TPaWI/AAAAAAAADzM/aW6KrL3HUlI/s400/file_xml.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='.pdf'] { 
background: url(http://2.bp.blogspot.com/-1TXCLoxeksc/TfUb5v0cHLI/AAAAAAAADys/frrsfpSvB9g/s400/file_pdf.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='.xls'] { 
background: url(http://2.bp.blogspot.com/-4mchydxbSDk/TfUcM0Hb7AI/AAAAAAAADzE/hTkZYduD6IY/s400/file_xls.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

a[href*='.mpg'] { 
background: url(http://3.bp.blogspot.com/-uZaIOrU9vHY/TfUcOJZbBqI/AAAAAAAADzc/9bBNR_Nujuc/s400/file_mpg.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

a[href*='.bmp'] { 
background: url(http://1.bp.blogspot.com/-XG8eI4EOxNQ/TfUbtRTAnUI/AAAAAAAADyE/XeFy0gdXWSs/s400/file_bmp.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

a[href*='.avi'] { 
background: url(http://3.bp.blogspot.com/-ToS4N4eSFPc/TfUbsyFM7gI/AAAAAAAADx8/veYOlPJ9-P4/s400/file_avi.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

a[href*='.mp3'] { 
background: url(http://2.bp.blogspot.com/-yZdVeVUN1dY/TfUbsnzwovI/AAAAAAAADx0/v7FT1FG3S2g/s400/audio_alt.png) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
a[href*='mailto'] { 
background: url(http://2.bp.blogspot.com/-qtnzCETuXWo/TfUjDdZtLKI/AAAAAAAADz8/pbxP1_s8R7w/s400/e_mail.png) no-repeat 0px 0px; 
padding:0 0 0 25px; 
}

You can also use icons of your choice by simply changing the icon image links in the code above. The code is really easy to edit and I hope after having read so much of our tutorials you can at least edit this code. Have fun and let me know if you faced any problem. Enjoy! :)

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top