Chèn icon vào sau liên kết

Chèn icon đại diện vào sau liên kết một cách tự động :34) là một phương pháp phân biệt các kiểu liên kết khác nhau trên trang web của bạn. Các kiểu liên kết khác nhau đó gồm liên kết đến các trang video (như Youtube), các trang hình ảnh (như Flickr), các liên kết cho file có đuôi mở rộng (extension), liên kết Messenger Chat, các liên kết đến các trang xã hội, trang wiki… :44)

Bạn có thể xem Demo.

Để thực hiện điều này, bạn hãy đặt đoạn code CSS sau đây vào trước thẻ </head>.

<style type="text/css">
/* Video Websites */
a[href *="youtube.com/watch?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/youtube.gif) no-repeat center right; } a[href *="metacafe.com/watch/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/metacafe.gif) no-repeat center right; }
/* Image Websites */
a[href *="flickr.com/photos/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/flickr.jpg) no-repeat center right; } a[href *="imageshack.us"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/imageshack.jpg) no-repeat center right; } a[href *="photobucket.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/photobucket.png) no-repeat center right; } a[href *="picasaweb.google"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/picasa.gif) no-repeat center right; }
/* Extensions */
a[href$='.doc'], a[href$='.rtf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/word.gif) no-repeat center right; } a[href$='.txt'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/txt.gif) no-repeat center right; } a[href$='.xls'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xls.png) no-repeat center right; } a[href$='.rss'], a[href$='.atom'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rss.gif) no-repeat center right; } a[href$='.torrent'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/torrent.gif) no-repeat center right; } a[href$='.vcard'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/vcard.gif) no-repeat center right; } a[href$='.exe'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/exe.gif) no-repeat center right; } a[href$='.pps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pps.gif) no-repeat center right; } a[href$='.pdf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pdf.gif) no-repeat center right; } a[href$='.xpi'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xpi.png) no-repeat center right; } a[href$='.fla'], a[href$='.swf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/swf.png) no-repeat center right; } a[href$='.zip'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/zip.gif) no-repeat center right; } a[href$='.rar'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rar.png) no-repeat center right; } a[href$='.ical'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ical.gif) no-repeat center right; } a[href$='.css'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/css.png) no-repeat center right; } a[href$='.ttf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ttf.png) no-repeat center right; } a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/jpg.jpg) no-repeat center right; } a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mpg.png) no-repeat center right; } a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mp3.gif) no-repeat center right; }
/* Messenger */
a[href ^="aim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/aim.gif) no-repeat center right; } a[href ^="msnim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/msn.gif) no-repeat center right; } a[href *="edit.yahoo.com/config/send_webmesg?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/yim.gif) no-repeat center right; } a[href ^="skype:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/skype.gif) no-repeat center right; }
/* Mail */
a[href ^="mailto:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/email.png) no-repeat center right; }
/* Social Networks */
a[href *="facebook.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/facebook.jpg) no-repeat center right; } a[href *="twitter.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/twitter.gif) no-repeat center right; }
/* Other */
a[href *="wikipedia.org/wiki"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/wikipedia.png) no-repeat center right; }
/* External Links */
a[target="_blank"]
{padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
/ * Use this class if you want your images not to be added with the icon * /
.imagelink { padding: 0px !important; background-image: none !important; }
</style>

Trong đoạn code CSS ở trên, bạn có thể xóa bỏ phần CSS bất kỳ liên quan đến kiểu liên kết mà bạn không cần sử dụng.

Về cấu trúc HTML, bạn tạo cấu trúc thông thường cho liên kết dưới dạng:
<a href="URL_liên kết">Liên kết</a>

Đối với hình ảnh, nếu bạn không muốn hiển thị icon thì sử dụng cấu trúc HTML sau đây:

<a class="imagelink" href="URL_liên kết hình ảnh"><img src="URL_liên kết hình ảnh"/></a>

Đối với liên kết ngoài bạn muốn hiển thị icon sau liên kết thì sử dụng cấu trúc HTML sau đây:

<a target="_blank" href="URL_liên kết ngoài">Liên kết ngoài</a>

Thủ thuật này áp dụng tốt cho cả Blogger. :27)