Add Icons Next To Hyperlinks Using CSS3

Cascading 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,

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.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 6/13/2011