Ảnh đại diện cho các tập tin download

10/9/11

Việc viết blog vốn rất đa dạng về chủ đề, có blog viết về thủ thuật, blog viết về học tập, blog viết về cách kiếm tiền... Nhưng hầu như ai cũng đều muốn tùy chỉnh blog của mình sao cho thật pro. Nếu blog bạn thiên về việc chia sẻ phần mềm, ebook thì mình nghĩ thủ thuật nhỏ mình sắp trình bày dưới đây sẽ giúp cho trang của bạn trông bắt mắt hơn. Tại sao? Rất đơn giản, khi bạn chia sẻ các tập tin thì thường nó có đuôi là .rar, .exe, .pdf, .mp3... Như vậy, nếu như bình thường muốn cho đọc giả biết tập tin mà họ sắp sửa download có định dạng là gì thì bạn phải thêm chú thích vô theo phương pháp thủ công, điều này ngoài việc làm tốn thời gian thì nó cũng không được chuyên nghiệp mấy. Với thủ thuật này, bạn sẽ có các hình ảnh kế bên link download một cách tự động và đọc giả dễ dàng nhận ra đó là tập tin loại gì.

DEMO

Các bước thực hiện:

1. Mở rộng mẫu tiện ích, tìm dòng ]]></b:skin>

2. Đặt trước nó với đoạn code bên dưới:

a[href*='.js'] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtNnaumX1gXIgnU-IwoGfknUxlZdWq_rjyXXtrKrmDl8PW_2TU5FgktGN-myg7t_OjzGxnwTpjGZMylyft1DSiTjz-TUfQg6eKD9ybp_dSvPrcLucVduM-BmUlYPyr6EIa9D5WKtGzP8/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/AVvXsEgaw9TprijqTDAXGpjp3m5dVJ7vMZoiUXlHIkfbRqLhcMhPl4SYr2MmvisBb6HMfnh5g7fvS3RkKgpDqGNwnLjyJhyMkGaeJxBn_nE9cwcUAezT0vVGjeV6zWDj-FYi0tDm9EMX6fI8oII/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/AVvXsEgFFuSmWOy4h5yrSA_mHHX8-sP-yYhmzOuh5Uybh8x4gXmbS9KGHUqkUPWc3An_Yroe5CsY1ElQPhuyIKR7JFLasZ_lVO4IqF_Awvkr9p_fQIvw8HS7dbCMxAX3QkUkX5ENwsKoln7yGUc/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/AVvXsEijAa6NzAFecFWpQOrKJmoGgp_9Xi4pCbSGHuGKkE5yVOjT0kxrJ-s6FcDoRLZm6ZMfd398rJGUu9lcMUJoUH-nmJc0VFTqHCKcgDK6PwI1rLBQhhKeipw9NWeCl4OkSz_uWw0_Hjuh5Zw/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/AVvXsEhVLdffTjIpHWk0m5zuoEpknnieK_oMgcbbgphD2FeC_3SvkhpEwneT97TyPG4b3FfQ2l7Hbal4C3b627F52TH_Qp4P5K0UTPomT2NRzYZ1irFIRZ1BK69zBKdU0hTnl26axKycZVJbdE8/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/AVvXsEj7D1dMWb1wrjoLV67n470gEIAFB3hhn69npAIuHz7RYwiKVIj8-mj-AmIzhx0JuBuy9WISVPdtbVA8xTO8QcWztY30sEvCJUZjq158ksfdtJrMc3nL1g7Lioy-x6OAmE1UuTbjMckus3s/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/AVvXsEgNGuULrD9ofsNqqF0I_l1Vs8fp5hZ7t_DCz20yrQUjUSpnT99IXJDgZUcy1MIxBX9411RbMqSQrbiZWJXZaMj34KmlCh5EmcCha-KWDlxlq_6hQ-xx7Tf_QniTPd2c-jYgY_SN7teJIBg/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/AVvXsEjQBLzEewcWHsRf1_nMr0RoVIdvF6FGw6pSPay3ylpTkmC27Q1kbFAXNi0RRRCkTPuQ2QKn_5eBgqsl33PWSwfeQOI6HK1OlicNvQz_f209jOm8_HV7SMjLH486ZgupCpNXFJWmUDbnDg8/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/AVvXsEgsP3WoiROygHALdVOSShDR6sUcctbkX1JCwQil4tVYD3VfeHS_UYP4NQCvaubLO-xTwgpO1vTnti1gYqai5wliH3JhA7M_el9uD2EQjHG5FIcz4C8Oe_80Ve-OaNKJ9U79VBC-wM8BNDI/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/AVvXsEid5bRIzzX49hVqaj5DDGoj6EpYDWpDzKIWO1xbCZTIGy-wLirj-IFgmq95KWJ2x_Go4_DLKvFoJL8ZtLU8i65d8iBplIE7d9-5gQ5_K08hBVakE-GO06w8keYMbZ5sJg0yATUxnM1ah2E/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/AVvXsEjQOMzAXHruK0q-RtJb33WNyHNNOOGgYPtyobibg9_7uLCXX4Hz4T7bGmBFue_XOO_oulOIfwAbNf7ZwqpSW7eQluaARcXqJ0iZ_g0707o-MYcgtb2-J8NQqG_5A7mICsrItPJxYbqoAUs/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/AVvXsEj3oOllEGGAl9wSCIWZ5oZYx31p8GqP8s1v3PgFh-zSsOMmPNwjIsvwjSpQGALOyFk60iHkt9txAlykuq7vZmVDurKoehr5wZQxx38f-lkNDtSAoi9QRz3-mQphRr5O68Bc5HCwB4X2sOk/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/AVvXsEh8x7QnfeAqkHJLpqvxkoEDKid_E6Uzt-OkGMIECHdYcOZkoCuSPciRs6-kQfcW6CgHXnOdIpX3gUqaZJDjkJLwDAArsYUXhJLzjateIbXxwZ7QaaLnNtLk9vgjX3ZHhB8p0GTGShJz0K4/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/AVvXsEggI_htV3OhalxmwGrMT2nfv4DUwOeZd4ekvtTWAb9If_r-hlQv9A1f3Ibjvlme0HLdmIsepYUxJStk0lOZ_lsv-SUgpwQo_cm5f6LxK1ZiBRnVpr0-cBNJsuxRbwik5tGzjER8i0bKQFM/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/AVvXsEhasOCpZjTFu7-P6Q1wFn0QCQuR1ZoDjC0b1iJu4ilJzslqNzQz629vy1QGsdcJj169JcFnHNjNOkoEMNCZyBoYnyO0Gu02Ej_0-aXcfZEvkUr1KaPlCH9ji1DtiAUFi4YqwKmUKaGf8Ik/s400/e_mail.png) no-repeat 0px 0px;
padding:0 0 0 25px;
}

3. Xong bạn chỉ cần lưu template là OK.

15 comments

Oct 9, 2011, 6:54:00 PM
Yolks

bổ ích lắm , sắm máy in :))

Oct 10, 2011, 1:34:00 AM
teeeeeee

anh sửa mèo blog thành Ubanks-Tuyển dụng giúp e nhé
url:http://ubanks.blogspot.com/
tks anh

Oct 10, 2011, 5:09:00 AM
Lee Peace ADMIN

@UBanks Lâu quá mới thấy em, đã edit. Trang tiếng Anh của anh: http://vnenglish.info. Bắt đầu anh sẽ post bài thường xuyên hơn bên trang đó, có gì em cứ comment nha :1)

Oct 14, 2011, 9:24:00 PM
teeeeeee

vâng! đang có gắng lục lọi kiến thức từ trang đó của anh đây :1) :1) :1)

Oct 22, 2011, 10:20:00 PM
Unknown

google pages rank lên 2 rồi kìa thầy giáo

Oct 23, 2011, 12:34:00 PM
nKey

Thủ thuật hay lắm.
My blog

Oct 23, 2011, 6:38:00 PM
Lee Peace ADMIN

@Neyurt Cái này lâu rồi mà.

Oct 23, 2011, 7:45:00 PM
Unknown

Thầy giáo share cho em code Comments nhé, XML và CSS luôn nghen.

Oct 23, 2011, 7:52:00 PM
Lee Peace ADMIN

@Neyurt Cái này bạn có thể qua vnblogspot xem nhé.

Nov 4, 2011, 4:56:00 PM
Thánh Thiện Tâm

Dẫn link thế này coi chừng bị thầy cho là spam đó. Hihi...

Nov 4, 2011, 7:24:00 PM
Lee Peace ADMIN

@Phạm Minh Tâm Link kiểu này thì chấp nhận mà bạn.

Nov 11, 2011, 3:39:00 PM
Thánh Thiện Tâm

Thế à! Mà sao PR của bạn chỉ có 2/10 thôi nhỉ? mình đã tăng gấp đôi rồi kia mà :9)

Nov 25, 2011, 9:37:00 PM
Unknown

bạn ơi. đổi cho mình từ http://www.cado188bet.tk thành http://www.cado188bet.com nhé.

Feb 25, 2012, 10:17:00 AM
Mr. Huynh

rất hay đó anh

du hoc Anh

Mar 1, 2012, 5:16:00 PM
Phạm Huấn Tech

thêm vào blog thì khỏi nói

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa