Hướng dẫn làm ảnh đại diện cho các tập tin download

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/AVvXsEj7_bGzegIqFLNkrpczdtSDFrfm0mysT8ex1Tm3w9qdNQd0-8H9QnCLmXM8gBm5CwThY2RX7sNxSw98mC_x3YZX-v94LefNiYHNJOimd77n4Ay791F-YYp3HxUuGbKREwiOyVokJk2dKCY/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/AVvXsEi71SVLtI47M7MmgZvgr78PkFgIuOZcPyOyl5uSkn8Mhs6UEVzPaGTIkEuVSihvv1emrEyRGCxilGVRVj7-sYRWN9NxXqe1WLLsliEZ5JR9gTOt3Gp-TKwjbw1qo9DiqDxy5Qx2eTkIC-8/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/AVvXsEgsmm2nBP6PLViVJy1nuZ80YeSukDHv_dbLy-HkGp1seA6CsuoaJb6_oDPYrA_NYqt5iiNwLYYyxtsDzXWV_Xd25HBNxxJW1ejbfnmeBKiwUWYvrkfcHcM0_Me7Ky7nyBVJJ6dmOt8gHC8/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/AVvXsEh0RraDrMXZIIZzQnJ2sRKSGOnymfMX5zgOt0srGGz8GRPAK6lL8QD5yvzPDqkgIUOMVHE-IUSF2vxkofpPQkEptgAq3a-ihlIP_eiXXJyVhSFn1T-VIYwPFc_Gys9rc0ZG-XtR3_X5hqw/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/AVvXsEhjtOMomujbNQtsY-DlcHIOIjzqXDBM9roBXMc023N0fK7k5ZVFe2uOrnS2_xI8zX55TJuMfQoPQWZ_y22knPfAkVCtnHVE-0dXMcUmbYqCu4YmhXV_SBlb3cS1y1kuMwY99ct34xpbTUU/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/AVvXsEg9W_GxnC8qR4gkkle7h_XtDrn0u3HKrwJ6gIWYK7iCE4zAsaz4sWrv3SnW4EHqx8zZ_5j7LPBk_39HXw5ZxxGcQWEqWeAUAPIZCuLFR3q445OKWLjPZKvdscsSHm6bs-SRlgD_30tp2kw/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/AVvXsEi6OeueQbx1yncjBl_Ifn9bbY37xfb3BzvBDCu8CBOYbFimyCGBDlSepbqMalnXvlXeADrBOBWzVPz3V_6X3jHj4Ik-nyXeDcokpzRitKjZJdi_-7j6iHhC5g0CW9ftXlqEvfC9YXyA3uc/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/AVvXsEi8wuP_3qZydnBhwpEHSKBoUVeyp6ZjJd_Ny-cn2zvTeCObd98kgJ7gV3ehr45jQCCabruqgclKvd6LkIViMJgkH8J3VytzxT3k_IsVvi8gZQQfyR3ZTEvXZCs6SRPErHFZGRWeHgJgSc4/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/AVvXsEg3WkKCln05BMrQwo8gAFSvUCaKoqcYdukAz-qvDNKdv3oR4ikhBl5Kg2Ce5PEbVXGc-D-H1iQlpeiohKQuCrFuXhsjOo78pT-sKyVjumetxm7W2J8rZ4o7w_UVHGRHcqE18xTaStre0AU/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/AVvXsEiKQ8sgPVnrq4W-nkUMaVt6Xf8mXfZ9O_oYkLbTdvX6266AbZ8fCokDUrv7YJp0bZMu5CoH3IupqQvc2NGOQsBO3i31a1rOc3qA4fuQMOnaN-cQYyuV6CKMJTbKAgBcFk3bVvTOQXbgzwA/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/AVvXsEh1K7IoPaTVo4qwdy8PXztED1NySsYlzucxEl6egBQcTYOgnzYos-yD-4ehexSXm3DA1PZTF_srx2GEM4XoXSQl_QieH2XA0jCHNhhldLQM7tPnogTm1eHjoSwryI0EYn4sX4m2sFlTTdo/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/AVvXsEgbMFYZNmAxf3W7vFHbb9s0ncUQMfmYckkkczlnBIz5IiTR-ikSqzaXuhzgH4yrimXMkWDuYOHVquOSNzHARS_t8-zC_AUws-Qr2lFQin_bFixOFgNtQ6EPjC3jLyafSMWIyF8MEIca5ZM/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/AVvXsEjqQ8nDhwH7xlbtPCX-sHZFLzEbXp8Lm-HVqFGM4KLjxAtgE97V9j9DR1cdRtKdK02ZjNX3S4R5xxk67rDdR337-_Iu7Ugj2zHm5KmmRl66x5eEMmNg1xohYY16RC5f4CNzmE7CUdlz3oE/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/AVvXsEigfaWu6mDAoHIwi3YUKHorcdMvcUgUVDq4oVPyJBPOYJR7oeviYAwCV2z1oGiwvYGjUOtP9XGME2a8Q1aVdMgQDwgwmCIsasvzV03HTVo8Mk-CDb7HM_-Jl_NYcAcmpLn2bIfYchLUBNQ/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/AVvXsEgL0kviFDX4xQJMS-oFhsVjcJhYooava-iiMteH6HKHyCmK2mQElU82yLxpeUZN2Y1keSXx50Xa8Szh0R34JrsDTfQPx5-6leg5dKQDEaC36ykaqhB3X9z_tBrc2AUzwb-0JEyWMFu2vew/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.