Chèn biểu tượng định dạng file trước liên kết (Blogger)

Bài viết này mình sẽ hướng dẫn các bạn thêm chức năng tự động chèn biểu tượng định dạng file vào trước liên kết cho Blogger (blogspot).
Lúc này blog của bạn sẽ tự động xác định được định dạng file trong liên kết để chèn biểu tượng tương ứng vào trước.
Ngoài việc tăng thêm tính thẩm mỹ, chức năng này còn giúp cho khách trên blog của bạn có thể biết ngay định dạng file họ sắp xem/tải về là gì.


Cách thực hiện:
- Vào Mẫu, chọn Chỉnh sửa HTML
- Bấm chọn vào ô Mở rộng mẫu tiện ích.
- Chèn đoạn mã dưới đây vào trước ]]></b:skin>:

/*--------- MBT Hyperlink Icons ----------*/
a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTY_inrlcHvoSUDBCa6ruD_PRR2A2-iPMS1u6fRbXFio7pOWI51QFGvSbZ9caXfFXs4CV3bHhEQl2Trv3PbA2XpKRURn54bGW56-fgooceMR66bDvqT1oHlghuni-BPWuT8dPkfaLIQnQ/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/AVvXsEithWq8aFgjR-aWOmJTOWk8Pjr1SFLLhwG2Qu8O_ZDNe0gNYrMJgkbMZYbXBo51ZjaEIdKJSgqR_ZUsedPPZKWtMeltxAd6S-kVxPKUo5N64-9UN_r-cuGV8o0CocGlICfforrOVP0eFIo/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/AVvXsEgvunl_WABDrdXGffyfFeds11pMI8JHgwJ6VOZG1TnwZLkAGV3ZEviSpZw9Ms3biO9ynSwBSFl8X2PJ8THajxuhNNJEFpGIKS6wHOeimc2SJmosBqfKthAhOHOpilIrTeMxt0PKI3Rm0hY/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/AVvXsEg34kP4CtPfvnaHT6bPnjtfkFwVd3O6ZYg_-m5MMcjsysIbbkSLYyXIdumsfJ3ZFTzJ1pQDCmuGICvx1d0CLJNVhe4qpgs1G4kuJaAXynlbvjS2cTgwoPU1eUJSNn2HYKZGPiLzTiag3kY/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/AVvXsEhCHjIZAIgvwfBV-9yIULvUdBKt1VzWqqkzexx9PtILC2s48cq40pWQzg7QFiXVI3Erq4XnklBEyQB6pAfo8fH0uN71fa1IqU9AdJ2EBTRnZ2WjnYNxGT9rccvutKgFSAbya3wEYE7UHVY/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/AVvXsEiAvZ2N1e43Jn4i-f8S03FBoZWdXKGLaXDBhdyQUzGOmv971B99UndHNEfxvU1LSCt-PtfDJG1CYXQ8lW-fJAcNLZOcJm-T3LPpub1hJ87TS1mAvfe5RaMH_H1VrfJqB0V_lW7X8O4Aw-M/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/AVvXsEiUPUrZkB5-M8jzJlRLBauhcuLxTZ-lq1xtcPcek8WUS2UVDJWXnTj0nGA1kB-3g9xFjnPkzNVb_5hWuvXtALHcus7Vq5cAvbdYY1Unl-S2w5_sI71g7pfIMkye9FeqRHCdYTRcdgS5OBY/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/AVvXsEhBcIdLrK2MF1bkXf0rGJYkpFDSXaALDSASPNz3AURQObqncjDmG8jLTNBSbCbvGhaapsN_4EwvuFI0n3HS3xAWtyjtGTJFL4UrLfzKb0lPhaObsNS-7-miuUZO_ydWu7CA3tFr7GGAx9w/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/AVvXsEizruVhwUoxAlICnOXVhbYKp-b-uJUwQ6jMblJ4NaRb7PwSTXh8F_FfTiRwXO4WVVRqRMeWd4G8lxqM1u2D0BlobZDJDarUoJapTFivZnBHAckEjYRPuKYAKEkoh7ay1Nf6p8R9Hj3_yAo/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/AVvXsEiqzEnt63N9d5O0fVAsPegxHFGHD4bc_fc2kxLZL5FsdWOIdfivaQmSuwpJ3r6WbCc6WuO7Lx_l7iZ0etA1bD0bzMxSf8SYClzL-HLLCtFKJurmsCQcAwb1QUCHo3yV1gu9TRxgxfKW6dM/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/AVvXsEhVGI-No0odQ8soi6PPnAOHHLv_q0iHgFHqUZIfKKqsUNNN40NH3QkTNhSXlgbx3tk37EQaYzaxDRQZ_L4NNLtPNPmtPlyKiClP-U6udKpAtKcmCKezcma7Q49lfDjjQEVrb1244E9etjQ/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/AVvXsEhJ-FuMVOdbmlhy0xIFeFe5Gu61-cnyVmDQlHPT6q6yCogNZBTfhp_gPEzynEKCVNykob4aex7hfhtDKYTyeUa6fXU65ZNmWOs_aeeFCulgWW-hL3Hoxb2l5grEFjbNulkJumo9r1-zMXM/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/AVvXsEhXeXVJkRQs6vmvTYeP8NpEqd1Z0KK3zJMvbTt0GD_gvQt55vaFks8qrK4cviWEtpPYvlAPYIud90xKKQI7DMj6xdjQfJ0NEVdM-FHTtMrM0emDOWYLfS891Pw4USHE2dJruJiG8DG4pDI/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/AVvXsEghe5af8xZT7zl4ijFZzW2_sfa4zlM51EWdHFMgf5UD3iW1kwxLv-zas2_PofYOVRjKjrQe3pnZz6STrjxEZCEa-2D-7mlGUFKwpAtijRp0fs5nkBV2qPgkiPYnkG0SgCzaoi7Wrqyy6kA/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/AVvXsEgeh_odikQAcyIPV7X7eBiCIltSIsi9alqBmgIBG4oVzI1vhHmwSynPTHn8amo6Cw8MPo816bcbMj8lDVbFw_V7cb5L2r92Lnyjgg2TUucVYJnapF3DLetbZ-Y7AZ_DC-MCyuQlzwZOFOs/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}

- Bấm Lưu mẫu để hoàn thành!
Ví dụ: Khi chèn link download ebook có định dạng là .pdf thì mã HTML trong trình soạn thảo sẽ có dạng:

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

Và kết quả hiển thị trong bài viết sẽ như hình demo bên dưới:

Chúc các bạn thành công!
______________________________________________________________
Hướng dẫn này DoPhuQuy tham khảo từ nguồn My Blogger Tricks