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.
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>
<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.
No comments