Tự động nhận dạng và thêm biểu tượng trước link của từng loại tập tin trong

Với thủ thuật hiển thị biểu tượng (icon) phía trước link của từng loại tập tin mình nhớ đã có 1 bạn giới thiệu, tuy nhiên vẫn còn khá nhiều bạn hỏi mình về cách này nên mình xin chia sẻ để bạn nào đang cần có thể áp dụng. Với thủ thuật này thì bạn dễ dàng hiển thị được các biểu tượng tương ứng với từng loại file bạn đặt link, và thủ thuật rất hữu ích với các site chèn link download. Với đoạn css bên dưới nó sẽ tự động nhận dạng ra loại file bạn chèn vào link và hiển thị biểu tượng đại diện tương ứng. Như đuôi là *.doc thì icon word, *.gif sẽ icon ảnh gif...

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

a[href*='.js'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPKyEv-W8wN32h3QZX4QyInjX4VUgpFAZGDoCsVJWkoJlqFWuEwX8f3BskpXNrdu_bQWdiRT5pNozDv6lgA4X_IEowpf6huOVBHXR5swt7NynG19cREuoK5L-l4TSAxxCh7HfBpY4JnI/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/AVvXsEhMw5TZZ-3YN4OucTv02V0yMsZaEFH2PVCu9fyR3EJpckKH7K96kjDVZrDMssJZHqSI7sd1JrTXVnabgIYFiAdfHnN1TNY3m9q5h2d7JxBFIQYEZRbQfKQY5em8eO8yzng1cFCcpHPh0DQ/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/AVvXsEid8rvAYc-pkzBLhZk610qjsKsv2Iy42XdC62PGRVCw7vRUp97UMzE48mwZuBI9c-fQctg86UbZzBuE6RT4G-ECZWmIJSHbsx5qWehp71TCf7NRZpaS416RctNfEjSCg0x8GMJCPf2dw1I/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/AVvXsEhPk88TOVGpJajDJAsII17RdDpLm36hHQKZhyphenhyphenwNQ3EvmXxHF6vOQHZ_MeXKasdmHOcpUSqV8_tqMQcmW-y-YBu_xjJIPwaDdrlVoikgqhdoOc49PHKKJdRTj8YIQHWnOtN-rr19gzBGIUQ/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/AVvXsEicqyKdLwQ5YZe20fR4BpBCY1ZzQHruQzYTqsaGJxTr6vhWkyREBywX7SgFOsqwlUVzcnXqcBQrwQU94Qq4mJSSuZ6S_ujVPVwcrSBDxXv9e_t-Tzh8UuN-BVj-jahETd1IXKJI-X4L_YI/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/AVvXsEjOL5gkmxEVjuOFH0X8DpdnuMvPUGwbBh8tA6-MobyJCPhsv0DMTyCwrlNrIw38qmCBdn7NFl9P3-_U80mco9HTDEO24S3AkyMR-XM02y9nj4aFKPqUNVffnxFwhkVdYmTKMkhpQo2AN_Y/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/AVvXsEgtvETQRBn_F_eZpuj0IMvoLOU6pWzowe1RPkH_vbpLP50_tzT2WagUTehn1hyphenhyphenkhanHVxy58hF_cfhODRV_U3qg2P4MBh0NnXpIVRp4h_A8Cuu9XkXxXFzL3qyiPhc9xTn_08_36QD8ulU/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/AVvXsEiyWQmV3QRTcMGYS7aRocxhBnB7iRyYJ5GbxyzHpOsUKUzsUW5w-r2VniHUuP6jdTzFNLuItv7Cf3Pllylu99l98P90fopwRkIw_u-2A3XdA5-k28kX4KkQMUv2EnIyieAe8gGWAt3OX_k/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/AVvXsEj5IIMbSDKYm3FH4B1a9sg82tFDzn7qUM6d6xKerzhLGJthWO8AmmYOCMobO2oBfBX5XcFHbsX0NRIRmzd6ubDtFFtsxfUpKwpt5I52WrM4vYuKEHI6W8rwNk5y8YeQFlzL-fgLC2EH9Sg/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/AVvXsEjOGJyNIfHhWtnrttycd882Vx6uotPKzaTPIuHNvI-BVo2wbfrYUEEosvOgWKsliaX6g4mDMm7c__IAsvwqkdI9uJ6V6Dxtx_DMpwPW1IzLJsEFI_ctcO1knk2fxT1Ehw8ujuSmm_yG6c0/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/AVvXsEgID3rsMSEwpLfNCONN5colRVuTHIQ2A23xZjENsXI9ezppYCkmV9caTekPvZ6TqhLGzONws88Rs72AZtcMD1Xklvy_DFzaC4WVs3iCkxG90kBpqTM2yuPln3rTn56FS2Z-gOd5cD6Y_vM/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/AVvXsEjEv2HP1ESzSMlv-EPnTNBazvCpgj-ZW814AKnBwbswi69Iay2Ujqny6_51T6SpmHlQt9g5VOGV3EW6FMDVqVm15Or9SooMfyAqnQdmfzGyZLJjfGwZoj-0fGz1y9_Z5iEpeYUVoEcgDY4/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/AVvXsEhWuaieEeDsJXhXNRas59OeskFXDBDbd6B1GVU9BXLZXrj4HE77aVoX0hdKtzbIVLL55Mm1mnJCl-mSrYa_-e9dmG4rniQRFFWgHn2PjgAWQy-SPlyy847_h7cCgRafxbW9mSq0YNLRPIM/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/AVvXsEjE-2XdeTrTfAryezx1gMc_5nSujkQywlPuConwnkhVFMJjZgO_N5mHWquLjt05rnglheQT3ThxbgkGyLwumFRsoTKIyQbfftayHAVJIG2fEwnsrVesPBWtt88k813LUDLmJ931PbvtcLU/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/AVvXsEgE_Q7Lt3vDEt1RgiCrQC9YY_1p7RXzkayoKM-1YdwwVdukZJiqu0OEmDhVR2F6TVuNtu3lQZH0LkRJcLMCjVjOmowGtobrfA911f6m0IXNrtOXVERIWBAZdX60WZMrVYWVwS2tkTcqc4g/s400/e_mail.png) no-repeat 0px 0px; padding:0 0 0 25px; }

Bạn có thể tải bộ icon về máy tại đây hoặc tại đây và upload lên host của mình lấy link thay thế vào background ở trên.

Xem bài viết trên phiên bản di động