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
Share this
Related Posts
Grab a Domain for FREE - Offer Ends on 30 June 20101and1 is offering a .COM domain for completely FREE.
Domain name registered by me: DivyaSai.com
You won't be paying a
How to Choose Brilliant Images for Your Blog PostsA guest post by James Adams, editor and contributor to the CreativeCloud blog.
An image - worth thousand words!
We ar
4 Tips for Organizing And Uncluttering your Blog ArchiveA guest post contributed by George Baker, who regularly writes for SparesNextDay.co.uk
A well organized blog has a ton
How To Add Music Files To Blogger BlogsLive demo of the music player is here.
There are several occasions when you would like to add music to your blogs.
6 comments
Write commentsNice concept...!!
ReplyBut I think it makes our blog load slower, isn't it?
ReplyWell no....as I have said you don't have to add all the code, so you can select only some of those icons, moreover these icons are so small that they'll load almost instantly...and finally there is no javascripting in this hack, so you don't have to worry for the load time.
Replyhow to apply this for every target="_blank"???????
Reply@LeBlogger: I thinks is like this..
Reply<span>a[href$='<span style="color: red;">.css</span>'] {
<span> <span><input name="IL_MARKER" type="hidden"/>padding</span>: 5px 20px 5px 0;</span>
background: transparent url(<span style="color: blue;"><span>http://i40.<span><input name="IL_MARKER" type="hidden"/>tinypic</span>.com/2yo5zzm.jpg</span></span><span>) no-repeat <span><input name="IL_MARKER" type="hidden"/>center</span> right;</span>
}</span>
Instead of the <span>" href$='<span style="color: red;">.css</span>' ", put " target='_blank' "..</span>
Tell me if it works
Hey, what !?
ReplyWhat is that at the comment code ? It got messed up T.T
But you get the point
Comments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon