Add Icons Next To Hyperlinks Using CSS3

Hyperlink-IconsCascading Style Sheet is the heart of designers and with latest web technology such as CSS3, designing has become even more interesting. Thanks to CSS3 attribute value selectors, now you can style any file extension or tag.

I am using CSS3 attribute selector property in this tutorial to add Icons to hyperlinks. Previously we had to use JavaScript to add an icon next to the hyperlink on your blogger blog or website but now you can do it easily using CSS3. The icon will depend upon the type of file extension. If your link is pointing to a mp3 file then it will add a music symbol next to the link and so on. See the demo which shows 13 file format links,

Live Demo


How To Add Icons 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 Icons ----------*/

a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDs53hCDM-vZebabC2hduCN1zoLKFSIcNBfOx1qWjKrTEWHFnJvB4a3VD4T-82ihZzuJZFpZm-fAbQgz3lhCdUmeiu5DNqczxYnyZbkt5Z80qXp3SXUY6TuCWekpKUFAom3wAV5JGa3Kw/s400/file_js.png) no-repeat 0 0;
padding:7px 0 0 25px;
}

a[href*='.gif'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QeOBQaJQlD32XR6yVnkZCi9ee7UVw7yU1AB0_Vp_nvO8X8G3XAt7qPeeBKhwaConb3ilMMpXAjgPQ2xsCbMPyqyEa27TD4ykxGUah-6u-es8ge4DzHu-qdo1KHff5zfUZIdFlhgB2Ew/s400/file_gif.png) no-repeat 0 0;
padding:7px 0 0 25px;
}

a[href*='.doc'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge0c1MSohDTIBgazcn3utiGFQd2AK7OzVOjMNhc4rTyc8Hu-C1vdLpJYFv7E9ZYtN5AOUk_923GoP0zzlOd3LgN1QkjMHru9Gp2F0rK6esrGStn3PRucDE6SM-jU2lSXFc2EOAFYWNnG0/s400/file_doc.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.rar'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCSp3o1jl5dz2l8VmttZ9A5gw56uPmCNpYQVHUNIYHFKydbpYFwTElAKEQ4IzgkA-lOH8DZEGEfRrqkekfZsuIss-C-GwtE6DUg6ERVKIFAL4DpW1GuqWaYhMX3QM9PftcaPFiDXCRuE/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px;
}

a[href*='.zip'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18vYxv3R0lW0_KDRWOpZWbssXQowef-QuY6nD2YJ1LlJzPnIdz60ZV6U5Q9-iKzRuuxoc0P1OgysaSxkvMe9sBiS4foeY5Ou_6nHwP9cR28q4nUWiTaloCXDesIiWHLEgnq8qULVU9l0/s400/file_zip.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.mp4'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9PZOz7QLwPquwLfSzQEwhPCv_zJom818o8uT2eUiOe0yd_ENK3VImyZfhEDOwpD7XASFQmNj-9xPW9ON0PKK6fh_2BzR4F-sMnj-pGzOcbXqhCNyVCa7mGgKeVg9gwjxg8YsU1IKhrhI/s400/file_mp4.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.php'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTiim9DSvb90JuYXPROyLiCXaHhYHdE3sbTmVfEKrLXgYSeOUMmtj9FKXdwto0KJSc8NVl7MR4GsldnyZMr3HVFW-jfjUaanbHs-WvQ0d3Uiv9ULt8cHBZa2zhSzg716nddZsf_wi_cY/s400/file_php.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}


a[href*='.xml'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWurdb5BNLeb3yQqw3gyDdob6DJUO0qjQq1YQKX8UGv1zxro4JngLEl0J-saOx8foQKRlgwhJ0mEPFhnFGEcxmsiRmDaKuPlzPHNU1QX6Vn5pHLhckDCsl62zlT9nXHf3TS0W9VIb2HF4/s400/file_xml.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.pdf'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMHubl2Tpw_JGEbDxxmFGY0JrVmRszAmF7eT9utgM3JsDDNxas2ZB1-2JhAmmWmDbrI6UkqiRSFk9tTHVcTNHmE9h-9qv8URQhvUFNsaqcF3seuMubdLVV5yGPoNGY45SEqFD9WubVmk/s400/file_pdf.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='.xls'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJFKbNdFN1gKcqU9Isn3aZtLtYvLqg_fBmoJjrjpRghO7wVqG9jn3I8fiwS8fMNycLDSjP6W2bg1tdWs_vmSbCCOVXMGkboYB2rjXfzXf841nnyVgttYHUSF2xjanerZwbEztd3VnvRps/s400/file_xls.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}


a[href*='.mpg'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFM7ukdkDGWklIKjSIrhR92ZnilD03-xcdy1mI7KnNAsOk9pe6ZOVBolfDouAleTVpo_8ZyscunQwTFL-LBsZXcfTaPLm4ii1M3RX924miO_z4MtS0BmHUppcxU-yOTmj0lxGYVawSMY/s400/file_mpg.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}


a[href*='.bmp'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7UKKmgOJc_NWvtDKzBlKx0XoJImapfvdIgtoUZXz-XiTIvW4h_1ILP13IfjlDusRJTwgI4MXqVi_zZpXl7Vpl9TgbeKIncVBe22EAUIa-jVTV6eqVTC21comhbMHlY2j9PJXRbXUtIOQ/s400/file_bmp.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}


a[href*='.avi'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxzGHvLHeUUifjIPTI2h9rV3J9WDNr9a1OtjoWJPJvIdl675vsL5_d_HCVoSGws3KhP8WTKz8iNIincFo0qGSoeC1kwjWxn51Lt81raf3uz7x7Z4cRRT-9Po7lpz_xTbHpmgj6212zcnw/s400/file_avi.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}


a[href*='.mp3'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pco-ZaDNdSXXomzdckVK5Y4_6reO4S8HMNQ53Uuq7tnC9EZmdkZpI52vDn3r3Gqfh4p2OhH75QVcoXAW_dxptbmY8ehl5ZXsij5s5C4DoQ5KW5ScGqUCe0pym9CcNwNVvBOq9cheTls/s400/audio_alt.png) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

a[href*='mailto'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoi9BFaRHgh-LforIh06wRDIJG0eCxFDHA_a_jj8CQjj42LVo-beLpNkpEHh738PxElZgQXKsmjYU0KpTqv3v9vU4FLnRmZstp_Q2umnLRRL891WlX5yJ52COSkCQDXTZWlhatBP-wf9g/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}

 

    4.   Save your templates and you are done!

 

How it works?

The icons appear when the file extension is detected in the link. For Example if I add a link to pdf file like this,

<a href="http://www.mybloggertricks.com/xyz.pdf">Download E-book</a>

Then the link will appear like this when I publish it,

hyperlink-image

Now add any Ebook or any image link in your blogger posts, sidebars or footer anywhere you want and you will find cute icons appearing next to the link. 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! :)

PS: This technique is first bloggerized at MBT, any adoption of the code without attribution to MBT author will be taken as copyright violation.

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 »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. very useful tips!! Thanks :D
    I expect more css3 tutorials from MBT :)

    ReplyDelete
  2. wow this is just superb.Like it a lot .There is so much interesting coming up everyday Mohd..thanks ...All this will help us a lot.

    ReplyDelete
  3. Step 3 -> Search for what?? Its ]]>.. You forgot to write :P

    And btw I don't understand how it works as we are not adding anything extra in the actual blogger post..
    Is it because of that a[href* which does all??
    If yes then it won't work for me as my links don't have any extension which is more good as less bad :) But no problems..

    ReplyDelete
  4. Nice tip, but there are more other techniques to use icon before text. but it is appreciate able.

    ReplyDelete
  5. @chris
    Thank you brother and I liked the unique style of your comment. :>

    @s'prdk
    Request accepted brother. glad you liked it.

    @Manisha
    You are welcomed dear sister and this gives me great pleasure when I hear that you are finding the tutorials helpful.

    @sam
    Thank you for reminding buddy. I updated all that you asked. :d

    @Incircle
    no doubt in it brother. CSS3 is still to be discovered. Thank you

    ReplyDelete
  6. Cool.. Exactly wat i guessed for "How it works?"..
    This wont work for me though..

    ReplyDelete
  7. maybe it was my first visit to your blog, but i enjoy reading your blog.. keep it going my friend.. succes4you
    if there is free time please visit my blog.. :D

    ReplyDelete
  8. Hi... Must@f@...

    Really Wonderful and Amazing Post. Sure it will give good look like 'better gmail' add on in gmail account. But it didnt work to me. i sent the result what i got in your mail. Check it. :)

    Regards
    H@r!

    ReplyDelete
  9. @Sam
    yes you are right since you share storage urls.

    @Reno
    Most welcomed brother. Pleasure. :>

    @hari
    I have sent a solution.

    @IShu
    welcome pal.

    ReplyDelete
  10. hey
    to be frank with you, I NV your blog.
    The layout, the footer in fact every thing is in perfect order.
    I have goten some motivation from your blog
    This is how a blog is suppose to look like !
    I'm puting most of your tips into practice.
    I will really appreciate it if you can give me a link.
    here is my blog.
    http://relationships-relationshiptips.blogspot.com/
    And maybe we can become guest writers on each other's blog.

    ReplyDelete
  11. is it possible to replace the link text with an image instead of adding icon beside it?

    i have lotsa links on my blog and wanted to change all of it into an image instead of text..is it possible?

    ReplyDelete
  12. is it possible to show icon before post title sort by label.I know its possible to add icon before post but what i want is for every label different image post title.For example music label,and then i post some post about music use label music and in front of post tile it shows that image,example 2 using sport label,before post title about sport (which uses label sport) some sport icon and so on ? THx

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. this is not working , i just tried it , any idea ?

    ReplyDelete