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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8c38TI60b2LylJIPTW5cVaQCC8oEZRcrdSMqFc8ZKrCwklutKA4oyB_99p_1f51s8X0q3_DEhsgqDAHmlPe-8Yplz31rjjYSExHS6NbOtoaYt2qIuT6wCvMnlWYsHzKlOa14B9FeYZM/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/AVvXsEiZMmb_FeJFzH3H9pjJQn3tcTliJ1-w1GaRQhwCNSIS19NmUmBzEvqgZmZfXLeTew-pNb1mzP_NAUWmmPzCziIwZ9DvIyOgSYV_uG5ctC-sQzCpI8iPa95BGwGEzGzBgIACUtJoXLuBjwc/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/AVvXsEiVTTELRJqftp5nwlVa6JuLVaX4OJGqNxz9USbz-q8cH_6BsR_hFWpYFsemGp57TG0AaogU6FLi5_VqDkibdGu6Y3LtmlcpQ4zybww2-duo7Y9YOLgB_kwU_uP5mvRhCs9YPJ26aBtz9Vg/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/AVvXsEit5-xfZTABoF8WdZhdK1Gw9QN-rztrHzsLyW_MmCcLvVNsxwAq3FHTP_TmmgBqjFR802vtPm3iX_BKw8xodWLBPrUzVSmMpazV1YqC_kDEZ52fYwLDIPjqiVapZUWbnq6JxVd6Y7gOubs/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/AVvXsEhDmvmxNFsz_MuHhz0DzuEraBrNJkIC4gZSoK-ruqaDktTfElsaCLdfRa9w673adeT71FTY8pRsMaXP4CVLURLLVS4svCT0tsbtxam5hX7ANiU0mJTbBTyYwVBP3rVySof4e9j-D-S1VnM/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/AVvXsEjJO3jPRWHgxbeKwrkVMDGwgfTqbFPB9Q8wEBHHwagAlRsOai4OR0SZZymwnhs-8PIuWq7zv4kDEr00yK7xk5dTVsDVXFk3sPWKkAJLkbFIkZwRgfptmNmYwicmzA-U6d_DzlIae0HDolI/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/AVvXsEj4MDl-Nhapmrcfr7TnNjyl8foeDaR9Ak_U0QPmEbuEMiAn_MayKoUQ5snc3ZxSe2xiW4jwtkwB01UjCcVzKadKWAV8D9HYKBEqioikOTGTdjTDv_ma_S0tjlKFif_bhBcVnKkR3ZuWsEM/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/AVvXsEgqslRonvf9HShRSlY691kystPMDWK_wusr-pMTwIUmPJHyj3jMOFecErfBww6MB2C4G5SvFsZCyZ4eKP-wIRvmp09lEPxo6xu4xgVI4m15kPnru3PLKFSM6v4Bl3d5H2G7IEKGqSD8XyE/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/AVvXsEgyUvB011mSFn_z0RXkdcq-yPlZXppEUdkOqS2AWd7pwy1XiGnXNJAtt5YqzvBBeC2vgf4l8xJrAEglwtmy6OYpXPR8JIM9Rk3_cJm8ro_L60zN6CGlX-_R1VCqITpYeM6yUhMsih8o_Sc/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/AVvXsEjxP0Sg0pqYltVynrG3OI4UYYdtGesnYQXubC69ybA-4Uz6q8IfnowGpgF8PfOoj5r3JLhFCXEX6mSjrP26yA3_OSxmUsYqg2uF9SbkBFZrhtZvCdHnQkhjPF_2dT_pUEPOBxbjHiKhyn8/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/AVvXsEiRYNd7dOCdS6g6pzN6_n6ZCghHT4ydNrwwq7jWDsdbchdpAhsLldMdfaOfPvjeg030469TA7lIvHS9nQ_wG7bpEYrWXUSR1T0Bggfz2bqPZe0O2XNdod7c4XInB-5sk7Kmi2HS1_4_H48/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/AVvXsEg-zG4xAFFFM7HtEkM-dslVIb2wn19SiMr3w5imsfLmquzSx-hpUXRA0J-dfD4CsBeI4VzswtG3YPUlSLlq9lwkBfMR9TCj1Hy-Kihba9wf9QwtVNN3iD1XMkmht3yfHTvNWzt4FaUP4Nw/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/AVvXsEjwHvXMfyxA-fy0Y4aGueHa8BzLjLLXqo-t-f386BWsFcaNXLvxA0KrpkAYYRGa_muePCIJeHNCqvUJ8Walwmf1mtN22LdlYf2z9MBDSeaCcfmJZYrTn0U9A6F62ixNO_g91OsEkV4-tMs/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/AVvXsEhmbF5SSxeusz55l86h-tjMNVG3wHBoOigCkwPzgrjJeYlupFptJjIKgrozABdPeLng9Y8LkCsB1g9XNGOztMOCAJzYqTeqGpxUPv9mS0MaYkwhKiH2ElMFSbfZ-Be3Xsn01PCqWUKDCqA/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/AVvXsEiOdTQ-7Rg7gbdhWGnx9jvc_AV07diIZtwNgmJrFez4k7hlzWwo1_9fN_4aGRuw8IueYHYpmSJwUxkzm8IdP6_S9R9kCqO3vhqpKitCizGZElCV1w5J1ai_78p9P0L252w3z04kOZK8ocA/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