"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 Blogspot"

Traidatmui.com – 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
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 Blogspot

» 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(http://4.bp.blogspot.com/-V8JUArvVlDg/TfUbt5n91dI/AAAAAAAADyU/1IBTSCCOqqs/s400/file_js.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.gif'] { background: url(http://3.bp.blogspot.com/-cm5RFNkVp00/TfUb5CerXjI/AAAAAAAADyc/2kTlh1gZtNA/s400/file_gif.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.doc'] { background: url(http://1.bp.blogspot.com/-ZH-3gjdNNvk/TfUbtq9_ZfI/AAAAAAAADyM/5faoK_0PTWY/s400/file_doc.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.rar'] { background: url(http://4.bp.blogspot.com/-uy-ymIWEbsU/TfUb6fTzK0I/AAAAAAAADy8/1F6rIj9GCyc/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px; }

a[href*='.zip'] { background: url(http://3.bp.blogspot.com/-W4uO8Fg9m7c/TfUcNyXIdqI/AAAAAAAADzU/fBOxrHNQ4Zw/s400/file_zip.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp4'] { background: url(http://4.bp.blogspot.com/-sz4_aCOdfzA/TfUb5RWH7ZI/AAAAAAAADyk/VhWkhTM8GCc/s400/file_mp4.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.php'] { background: url(http://3.bp.blogspot.com/-izMrgCy23Mc/TfUb6E3vLDI/AAAAAAAADy0/QhQdYov4ieA/s400/file_php.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xml'] { background: url(http://2.bp.blogspot.com/-Etxu23Xq01M/TfUcM1TPaWI/AAAAAAAADzM/aW6KrL3HUlI/s400/file_xml.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.pdf'] { background: url(http://2.bp.blogspot.com/-1TXCLoxeksc/TfUb5v0cHLI/AAAAAAAADys/frrsfpSvB9g/s400/file_pdf.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xls'] { background: url(http://2.bp.blogspot.com/-4mchydxbSDk/TfUcM0Hb7AI/AAAAAAAADzE/hTkZYduD6IY/s400/file_xls.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mpg'] { background: url(http://3.bp.blogspot.com/-uZaIOrU9vHY/TfUcOJZbBqI/AAAAAAAADzc/9bBNR_Nujuc/s400/file_mpg.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.bmp'] { background: url(http://1.bp.blogspot.com/-XG8eI4EOxNQ/TfUbtRTAnUI/AAAAAAAADyE/XeFy0gdXWSs/s400/file_bmp.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.avi'] { background: url(http://3.bp.blogspot.com/-ToS4N4eSFPc/TfUbsyFM7gI/AAAAAAAADx8/veYOlPJ9-P4/s400/file_avi.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp3'] { background: url(http://2.bp.blogspot.com/-yZdVeVUN1dY/TfUbsnzwovI/AAAAAAAADx0/v7FT1FG3S2g/s400/audio_alt.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='mailto'] { background: url(http://2.bp.blogspot.com/-qtnzCETuXWo/TfUjDdZtLKI/AAAAAAAADz8/pbxP1_s8R7w/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.

Chúc bạn thành công!

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang