Chèn biểu tượng định dạng file trước link cho blogspot
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 rất đơn giản. Chỉ với một đoạn code CSS các
bạn đa có thể hoàn thành thủ thuật này.
Vào Mẫu, chọn Chỉnh sửa HTML
Chèn đoạn mã dưới đây vào trước ]]></b:skin>:
/*--------- star hyperlink Icons ----------*/
a[href*='.js'] {
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9qHrIN1bL8YqpoVarNl3juMgmvnHfRQCguoDeITFPxxVvYFzUL5UnqEtDRrMrtXzUGWsnTCtseup9q5RTO1VLsnfZdIzjN53hslQ5POhM19rxNKRsLB6O7OFtI7Ygx9djcUruHg8cNkA/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/AVvXsEgl4JXTPG3ZtVs42riIhQxTFYp0OmDoDDpFl1Relog9wo6dx217LfwMr3yoEgoNlNy9nKs3gba9JCM2hBpuj_wy7wszI-plpAlXUqWy8FllttOUxZ6T6TGu0rD07nlDGKARRqPiBgG8umI/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/AVvXsEjaYDwm_3VDE6B_wOOnFBP_B3X76OuuP0zpWCF700nYpk4NtPMb7GZDwWmZHjcx-IgCy8D8lKeOlfvZUDXW0PIEbbLLH95j4zT0NZfi7VkPT8yh1XFs0shhn_BGf1nNxjgtXDyB2tznDX0/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/AVvXsEgYZMx9kiM8W4hmd9z3LYUUtVNMtGsyi0n3u7cRhV3WrCv7PRADxFS134iY6l7J0gGvJa0RLUG0wZXJkbTI6cpbQV48twgW7CzJg5GU5jFPAiZjLo9VzLbwRwug59KEt9NsDVCZLcq8eeA/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/AVvXsEif_2z2Pe8Zw4vxYphm3lOXuNIQ9k6x3Ygv1aeBOWagWbh6q4y7VgVxdZUJxiY6eI-oKgh-gI42o9SIu2jPGDntR_gpGv6U0a5gx5axVfiq-rBDvJ7BuMH-qt4Jwv3KLqXujYTz-9FfO90/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/AVvXsEgOv4_LUTlINRfgyVtULKdSRGaBO8jb6JUQzA4HLU_k3RzOCxPk5opDYJzwa8-TYAOs59YjEjwH_AiT4Uay7HDM-WKLCBscFJP0AmNyej5Z9-m-fwoj6ghiHh-MONhMKlwfJ4cp6ZsOklE/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/AVvXsEivxPuodcxHo6S5C7JQ748nERreDEcPfvhM29Ql1zsWhTNm-ezcBPPuXc1Gst7H3Od17S1OCXgGL8hAWCIMd0g5Gu4nSkzPGA5LUxEUS7WN2wmv_snJhN0lW7dBhpnND5R8L6F89O8nIvc/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/AVvXsEjAjDoCOJdqoVrPYRfx5v1LYo_vklfo9N-5L1X1XS4FZxIi1Vk2qjiDm-ZcbyPyKWzj5R4IB3jhYHbyPPGLsTFSIOMCbf_uMlyRlDAXacQl1W0Lw8HwMx05MYLnU2vSfkBl-fpdNvTuB8g/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/AVvXsEiDuC1s7zFQ16iZx9VmZ1nC3hhVj825g5HHVQBg8DNUZCs6AzKVgvD5r41vulnQ5vmbdXPgXTjkGuDEKnNPa9nyOaRSLlool6vLOqluMgtI-KvrrdahpcWC_bPNBKxgLEEZE40hVTsHv6I/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/AVvXsEid8qCWkZvUSkemzXOt-ZGlUyjKdkPk04qqg94WroufSuSO1oUUBiKQjk7fhAlt_TJ9KmfnHrZ1KQZ1t6BBAk9Ja8xZ6ngvsUNySjNcqB6iDro6s-qcLHjxUnJlbz65BuKKk_ecNE8rB9Q/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/AVvXsEh0lFYuYW70ftIEYAI0oK55__0YzFYxQE9HXZ78Wg2DOdlCHtnRuKgTZZr2iIyYadIQfEk2K1gHClm5BaElpx0WLMw-J_p9fPRz51crk5uEcVAf0cYkvmAwzGVjcQd5beEJ1MWkx2hXkCM/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/AVvXsEg23kvXDDtFM6NhYHXycpRDRcUgHLBPs8a3qXADj1CqiYYnKXDWvmCI5Dhfch1pFAxBMnYfumn6nHfSXZsSdQXcMV9wOmCuPgcaSIJ4Y_rFT4XwIKf_aYS2ML4YjEQ9Fz9zeosZPqT7UxM/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/AVvXsEicjDeJWE1O8YBoq8wFyiqQjeaDZB3LI-zq6_y66PzGN_XRoKlrfsUfpN_rBeUnng2ay9hCA8m5hMnfqgdHM1BsDD1JG1FY8mNjWRF7NJtyIRYOdKuqaaZ1FjewecLFQYTDYPzSE8vw75s/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/AVvXsEjNxPm5cm2TAsyN4lWaEUX8nS7AnTMTcvxeoTnhRWqII7IHPgySLwLstbAbXl3uEI622j2qbELPZhHIkmLyPaN9_9o48btYE3am5NM5zXqXftCWVfoTuMIqSaexgSVLhceP7RopnRfZ5vQ/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/AVvXsEj2QqpvMdnnG8KmtOzLQm-RHhlj7dBMAI_TGt0cDCu4yZHrlDbh3gpQwCgziPBpaWImr8BjPikeL_UOaTJmUtOSGJ4COUhRdI12VqYUz5EpC0Sz5tl8ufWY85npnUpeBScX9r1xhV5SL-4/s400/e_mail.png)
no-repeat 0px 0px;
padding:0 0 0 25px;
}
/*--------- end hyperlink Icons ----------*/
Bây giờ các bạn lưu mẫu và thử viết một bài để test thử rồi.
Thủ thuật này áp dụng cho blog chia sẻ phần mềm tài liệu thì
quá tuyệt vời :)
Chúc các bạn thành công.
0 nhận xét:
Post a Comment