Polaroid Icons Blog Subscription Gadget With Rollover Effect

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.

The Demo

Place Your Cursor Over The Icons.

Looks Great Huh !

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/Bhootguru onmouseover= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4z0l1I8GDijHCcm4wGDWLoz8KfBdVoV_KLqeF-vtlllkhRKxDKDHHvMJhWcMuiK86LSbrt4GGilBDEkmNDDwL4t6JjYyVpcxqPzGLRTppww0FAuQTwdxdQyKzLvRY0Zyn-Gg-lYvkFaew/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGECgdnsvjty7kg-o_cU6gzbADVLmMfhdsuWKoONqP3Vwqf6EvILwBg3pdIxVZEWP5L6uzJXKenV9P_3IZsl0x67_IGrWO2thx2KpZz79MYC1Qnh5-hwZQj_zvy6VqkKbYpMuEThnACxi/s1600/facebook.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGECgdnsvjty7kg-o_cU6gzbADVLmMfhdsuWKoONqP3Vwqf6EvILwBg3pdIxVZEWP5L6uzJXKenV9P_3IZsl0x67_IGrWO2thx2KpZz79MYC1Qnh5-hwZQj_zvy6VqkKbYpMuEThnACxi/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a>
<a href=http://twitter.com/sakhawat_bd onmouseover= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VLt1oMId5_wqN37aGGaAQtzhMdecQfbMEDWHqd-d8Jx-cvWOQXYwsrtqJdixdLzK6fb1qs18jZu-GRRQoWglLnLY0veHnuvf-57P1-cUs-0xhz_y7n4yOaM_YGhI4gkeIOalaqv3CBLY/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Dj50kr2xfX1d_nPKy1M620mZyn-jLsyusi1EAUpTM7WGShJ-MSXuzjrR793GeIG1eKENLUcDt10ArQ_w4M6hboXB04bqmKYpkHAywcILVdG5Bd0WyqOdk22qhabA4SZAKo84sdKtiOrY/s1600/twitter.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Dj50kr2xfX1d_nPKy1M620mZyn-jLsyusi1EAUpTM7WGShJ-MSXuzjrR793GeIG1eKENLUcDt10ArQ_w4M6hboXB04bqmKYpkHAywcILVdG5Bd0WyqOdk22qhabA4SZAKo84sdKtiOrY/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a>
<a href=http://feeds.feedburner.com/BhootGuru onmouseover= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYuP_jnFCN5cAysI9ukvnV3MVwKt7vOz312XpSnKK1vl2jQFG5vTNIgZhm-r0fCZEeuoVVOzmMKcKybNdkxtwPzle-XobhRcossu9exkCxHP2sJUtTIdHMSe7JcLebdsimw82YbGSbr7z/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDqd3eVCfqT_H0-tik5HG5kYntZYfv0RZKzXUPyK2tzm9wQkQQQfsN8iH-jqpwwq-JaZQkLjkJuYwEf6I23uSoZxCEj-fl0AoZ4FzohvfQ-N2NR2JBgCSDUAGcPLlsDhWH-3cPXp56Xui/s1600/rss.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDqd3eVCfqT_H0-tik5HG5kYntZYfv0RZKzXUPyK2tzm9wQkQQQfsN8iH-jqpwwq-JaZQkLjkJuYwEf6I23uSoZxCEj-fl0AoZ4FzohvfQ-N2NR2JBgCSDUAGcPLlsDhWH-3cPXp56Xui/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a><br/><a href="http://music2radio.blogspot.com/2011/10/polaroid-icons-blog-subscription-gadget.html" 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.


If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below. Because, it will be a great support for me.