Add Icons Next To Hyperlinks Using CSS3 ~ Bloggers Festival Guru

Trending: Blogger Template

Thursday, April 12, 2012

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?

Go To Blogger > Design> Edit HTML
Check the "Expand Widget Templates" Box
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/AVvXsEiVQgnVnCoHedbZhKs3krmDYBnrD1QBKX4RfZyPiNj0P698lpVjwBunNWge7e3W1wQ2H3nN_XaEePTbEa6N5PNwcQNJEnutM6KM3ql0QSP1lPszH4w5UcNYLU9axQq2x4416EK_3Jt9YVU/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/AVvXsEgtgr7pvNmLvCp6-KdSwECGWaFv8GCVRW1yS5axbpAbMNnuG8p_tRcfSo1c8iK_ETvwhO5AEHU-07gyNExsErG3Ut8oyMi8QeXiTykNlka5TOnq5RepOSslOis5jslHCGV_Imqh1VmWdDc/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/AVvXsEjfBxBAM-610D8oHPSUPtZj96pz-bl1jVg2t-GbigpTX63kMPqdz8a8FcvKQjif1odgv80EVoOfOilgqLyiA_Ap25jBxi_fFVmQDjBff_7Jiq5N3hRcwYa8xcl9yKXGMcdFfnrfHQHiVvg/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/AVvXsEgxiMPh1FhwC8_2IxwgRxfkwHGfRnH9H5IxuJHV353K_5WaH2amxmt2hI4Luaj8SrlFSpTswV5ksgUxtcRgPFf880_SHIXNOFl3eyfa9JQZUg7eZjFLCPQzFseNdkyMkSGAehF_Ato0pYU/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/AVvXsEhLsnQW7HV2K5Ko7mxrD6xiZUHhNgDCbvRDD6R7HtTMMmb-HUz6vT7saLNtzAEjQtU1GPCUxO93WP_jiFozyt0-KypCf5LwJaFPtNhWoghv9AT_tGuII0D7xFiMN-WYUEdfD-EFbd-IqLk/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/AVvXsEjVkjOF7dJWx_E4kp5vImPmKiah0RhK9SHChnO4JpOZYlaK96LBB5LV2OZuU7m55R3gV5gA5058387cSVyv9T8hoD74XbBlVgmVNAxShlgSRUwLjKDQPmoLCqXCnEi5zN0GU8c5sLgJdlA/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/AVvXsEj2x5e3FsoQwxvcD3UknBDWxmXvlJGHRpQGmceWpMhmJM8_vbDeptKm5fZM676kA5UFLajHz-q_UAK8tZ1EVwWlTensyBHjlSQrHXm-3jXoiqkx9tJWLnK9YxVvuqkKRoSkbhvvXgNILFY/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/AVvXsEgWtAUpJvv_iCFQg_IXl_1qzzZId8eL2e7AgG0pDOGrZQaO_WsJApEF8ojHu_WzsFYiUl5SvNNtVxKoshEMnJfE6FbznFOC59Iie2aCrkrlJBWOVeoJdcfunjG6Nld7qfJQ67mPP0TVK0o/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/AVvXsEj0MbSQvMkObBhhOf1lMY1AEXJnH-O4GfP-Qs2qGL6u3sGIbz7I9hZ6WCQSCid7at07S_O0opIk6NVtQv47IKu8gwq8YyBfl7LqcclglhRVM34P2TKixqUjI1vjw02TfcKpPRIKqYhZ9fw/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/AVvXsEjrYm3oHJYMH-nUdFEX1O-JVbFJfnw4si2kCnNgrFtNvj_UcGCmFhfEujbZC8-pr8lhNNN5jJ63hKLHie1eEZ7lT-rBXSKVDMX305kaFsNivXbHZJDEyUBE7ZG5em0ZMYwK31hWSjwvpEA/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/AVvXsEgSpKXkW2m03MGaRHVTvV5YSAWNYN79BU-zXRnNP3VnjJfCyH0eWvcDZmR-9-9ANhPC6YibNTt136UaCI0YANxTg4n8Elm7dAbwug5g6zryWsoUt8hOjBZJfMsGEt45IlXCSAWSy91ILig/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/AVvXsEht_PCPpFcHyetlwCHHBsyr1-T4mcnGHELRKh3NFESCO8P7PP39e1zZNwat7gWU7M4tUxTcsGWcVI47lT-bGp0bZfcrsKFttT2z_RZQ-wh-E9Zm9lup_kcIfn12woBzRewBiphXJivfPJU/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/AVvXsEjoEWRg8A8qnyzUGIikFWAkto3fswB3vH_CMqPGJETLUuQlkqADp2hwgug45aDgb4U1kqpw0Qv-xpwk_r9lwlomUlMWs_zKEhepv6Z3vA8adEyrnPcc_ppMaEW44LacVniDTI6AR2OTHPc/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/AVvXsEho1_HEIqtDhFVSE3zr157ayv2Gy8v1WcggPNmUTyrwLlWJJhv5r0Z0Hyr6LYGIFhaeGGQFClwVlWFFfuXx4MZjh1OIqQInEzDq1oMbYnzZtL1JkUge_SLTUnUYKG0XVASv1AOJR6v2n4g/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/AVvXsEiKaxAOWUAgFJ_QWciFFgX3OQYxMe1LqIcDWlcXEf6KLvKyoBvyYdUpoi82ctHr9VgYAutBOOUH6Jp-eQqbkvvbfJSKd-8AByBVi16CJYNvscwWDDYu6vmOAYVAaxUh-tKC4WyMap-24_Y/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! :)