The other day i posted 3 very cool sets of icons you could use to let people subscribe to your Rss Feed, Twitter and Facebook Page. In that post i gave you the code for the icons ready to use, you just had to add your URLs then copy and paste. Two of the icon sets were very similar both having a Polaroid Picture Design. One was fresh and bright while the other had a vintage worn look. This lead me to thinking wouldn’t it be cool to have the worn vintage Polaroid icons in your sidebar and when someone hovers over them they switch to the bright clean icon. This is called a rollover effect. I’m sure you have seen image rollover effects before and this is a great way to use it.
So lets look at it in action, i decided to use a rollover html code in the link rather than CSS, just so once again it’s a simple one time copy and paste.
Add The Vintage To New Polaroid Icons To Your Blog
The Code
This is just html so it will work in any part of your blog that allows it. I will show how to quickly add the icons to your Blogger sidebar below the code, if you have WordPress or another blog platform add the code to a sidebar text/html widget.
<a href=http://www.facebook.com/spiceupyourblog onmouseover= "if (document.images) document.facebook.src= 'http://1.bp.blogspot.com/-23R7iMQYXos/TcCnWEQwPtI/AAAAAAAADlc/jGPp-_QBi8Y/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'http://4.bp.blogspot.com/-OlVAPY5N4DU/TcCr-NGtkrI/AAAAAAAADlw/TYJpdwMUpwU/s1600/facebook.png';"><img src="http://4.bp.blogspot.com/-OlVAPY5N4DU/TcCr-NGtkrI/AAAAAAAADlw/TYJpdwMUpwU/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a>
<a href=http://twitter.com/paulcrowepro onmouseover= "if (document.images) document.twitter.src= 'http://2.bp.blogspot.com/-QBSeBdg2pn8/TcCqOfT-6SI/AAAAAAAADlo/ks47LssGaRs/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'http://2.bp.blogspot.com/-zpBYTS7b0Kw/TcCsDEBdHqI/AAAAAAAADl4/j3TvkL4luC0/s1600/twitter.png';"><img src="http://2.bp.blogspot.com/-zpBYTS7b0Kw/TcCsDEBdHqI/AAAAAAAADl4/j3TvkL4luC0/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a>
<a href=http://feeds.feedburner.com/spiceupyourblog onmouseover= "if (document.images) document.rss.src= 'http://2.bp.blogspot.com/-SJF6UBDPtmU/TcCnWl9-gaI/AAAAAAAADlg/NVgsWS3Kefk/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'http://1.bp.blogspot.com/-34I9Zv8nr0k/TcCsCJjlt3I/AAAAAAAADl0/Hmioi9iUEnU/s1600/rss.png';"><img src="http://1.bp.blogspot.com/-34I9Zv8nr0k/TcCsCJjlt3I/AAAAAAAADl0/Hmioi9iUEnU/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a><br/><a href="http://www.spiceupyourblog.com" target="_blank"><small>Blog Gadgets</small></a>Note – Replace the highlighted URLs with the URLs for your Facebook, Twitter and Rss Feed.
Add Icons To Blogger Sidebar
Step 1. In your Blogger dashboard click > Design > Add A Gadget > Choose Html/Javascript Gadget :
Step 2. Copy and Paste the following code into the html/javascript gadget and save.
That’s a great effect for your subscription options, make sure to check out more of our Social Media Posts and Bookmarking Gadgets.
Drop Your Comments And Questions Below.
