See this hack in action at: PoolieStudios [code author]
This hack automatically detects the type of link (file) and then shows the specific icon in front of that link, so you don't have to include any "class" in the <a> tags.
I have uploaded the icons used in the code to TinyPic.com, you may use the same links or you may upload them to any other image host too.
Follow these instructions to show those icons in your blog:
Log in to Blogger, go to Layout -> Edit HTML -> find (CTRL+F) this code:
</head>And immediately ABOVE/BEFORE it, paste this code:
<style type='text/css'>
/* Iconize 0.5 */
/* websites (pictures and movies) */
a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/1z1vejk.jpg) no-repeat center right;
}
a[href *="flickr.com/photos/"], a[href *="zooomr.com"], a[href *="imageshack.us"], a[href *="bubbleshare.com"], a[href *="sevenload.com/bilder/"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/5minvr.jpg) no-repeat center right;
}
/* extensions */
a[href$='.doc'], a[href$='.rtf'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/33mv0ab.jpg) no-repeat center right;
}
a[href$='.txt'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/jaup7q.jpg) no-repeat center right;
}
a[href$='.xls'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/9pvndy.jpg) no-repeat center right;
}
a[href$='.rss'], a[href$='.atom'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i44.tinypic.com/outtn8.jpg) no-repeat center right;
}
a[href$='.opml'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/3151x14.jpg) no-repeat center right;
}
a[href$='.phps'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/do87jp.jpg) no-repeat center right;
}
a[href$='.torrent'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2vttwdf.jpg) no-repeat center right;
}
a[href$='.vcard'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2s0xq8i.jpg) no-repeat center right;
}
a[href$='.exe'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2e2jmn7.jpg) no-repeat center right;
}
a[href$='.dmg'], a[href$='.app'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i44.tinypic.com/1zu35j.jpg) no-repeat center right;
}
a[href$='.pps'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/16c9wuo.jpg) no-repeat center right;
}
a[href$='.pdf'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/28am90y.jpg) no-repeat center right;
}
a[href$='.xpi'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/353331s.jpg) no-repeat center right;
}
a[href$='.fla'], a[href$='.swf'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/514hhi.jpg) no-repeat center right;
}
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/290yez6.jpg) no-repeat center right;
}
a[href$='.ical'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i39.tinypic.com/25qyt5v.jpg) no-repeat center right;
}
a[href$='.css'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2yo5zzm.jpg) no-repeat center right;
}
a[href$='.ttf'] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/14lo29.jpg) 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://i39.tinypic.com/5minvr.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://i42.tinypic.com/1z1vejk.jpg) 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://i39.tinypic.com/w2hq2a.jpg) no-repeat center right;
}
/* messenger */
a[href ^="aim:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/qq94hs.jpg) no-repeat center right;
}
a[href ^="msnim:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/2qu43l2.jpg) no-repeat center right;
}
a[href ^="xmpp:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/2mqj2pi.jpg) no-repeat center right;
}
a[href *="icq.com"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/2eehphu.jpg) no-repeat center right;
}
a[href *="edit.yahoo.com/config/send_webmesg?"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i41.tinypic.com/20py7g5.jpg) no-repeat center right;
}
a[href ^="callto:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/15foodv.jpg) no-repeat center right;
}
a[href ^="skype:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i42.tinypic.com/2mcuif.jpg) no-repeat center right;
}
a[href ^="gg:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i43.tinypic.com/r1il3a.jpg) no-repeat center right;
}
/* email */
a[href ^="mailto:"] {
padding: 5px 20px 5px 0;
background: transparent url(http://i40.tinypic.com/6tjrrb.jpg) no-repeat center right;
}
/* use this class to make sure that images won't get iconized */
.imageLink {
padding-right: 0px !important;
background: none !important;
}
</style>
Of course you do not have to use all of them, neither is their any restriction to use any additional file types.
So if you have got an idea how to include new file extensions with corresponding image-icons then feel free to include them.
You may download and use these additional icons, from
1. DeviantArt
2. FreeIconsDownload
3. FreeIconsWeb
No comments:
Post a Comment