Polaroid Icons Blog Subscription Gadget With Rollover Effect




| 26 comments

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/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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

26 comments:

  1. nice one thanks for this useful post
    i always use your tips on my blog http://cargoogler.blogspot.com/

    ReplyDelete
  2. Yea it does look great! I thought the first tutorial was roll over, Nice Tutorial.....
    - TheEmoLab

    ReplyDelete
  3. Its cool! But I like the previous one better. That was more color full :D Btw, can't we add the email option in here?? like you did for yours?

    ReplyDelete
  4. Another nice trick from you guys! Thanks for sharing.

    I am planning to buy a hosting account. Can I use blogger tricks to the hosting server?

    Thanks!

    ReplyDelete
  5. @ Jayson - I dont really understand your question.

    @ Samiul - If you want to use the icons i have including the Email Rss just right click over each icon and save the image, then upload it onto your blog or image host.All icons here are free from Social Icon Studio.

    ReplyDelete
  6. Totally unrelated but how did you style your comment section to be this cool?

    ReplyDelete
  7. @ Kathy - It's almost a complete code change done by a guy that works with me.At the moment it is part of our professional services under our hire us section so I'm afraid there is no tutorial for it.We have lots of other comments tutorials though to add some spice to the comments section

    ReplyDelete
  8. I have been looking and trying to figure out how to add these icons to my blog for a year now! I am of 0 knowledge when it comes to figuring out this stuff. This is the first I have found that was so easy to follow and the polaroid style was the perfect fit for my blog. Thank you! I would love it if you added one more icon to this same HTML. An email me or contact me button with an image of an envelope or something... Is that possible?

    ReplyDelete
  9. Do you have the code and email icon to match the other ones shown above? I'd love to have an email subscription icon on the same line as the others but code baffles me...

    ReplyDelete
  10. thank you so much for sharing this wonderful code

    ReplyDelete
  11. Love the idea for email icon to match :) still having probs w/rss one, so had to delete just rss. But love my fbook & twitter icon :) Thanks again!

    ReplyDelete
  12. Hi,

    I loved the new effect. I just have a simple question. Where do I insert the code target="_blank" for it to open on a new tab.

    Thank you!

    ReplyDelete
  13. Thank you. Perfect for what I was looking for. And easy for someone like me to upload and customise.

    :)

    ReplyDelete
  14. can you please upload such an icon for youtube,wordpress,tumblr etc...??

    ReplyDelete
  15. Like this icon so much as it spice up my blog (^~^)

    ReplyDelete
  16. Hi thanks for this. I am using it over on my blog those24littlehours.blogspot.com I have created more icons too Pinterest,Email,Bloglovin' and Photobucket hope this is ok (although wasn't sure of the font you used so had to close guess. (have linked to this page via my tips and tricks page
    Thanks again.

    ReplyDelete
  17. Hey! There are great! Is there a way to get the basic polaroid icons working in a popular posts bar? I'm desperate to find some polaroid thumbnails to use instead of the typical Blogger widget.
    Thanks!

    ReplyDelete
  18. Love your site, I did exactly as you described but on mouseover the poloroids change to broken image icon

    ReplyDelete
  19. Yes, that's absolutely true also for me, it's changing to a broken image!

    It should be about the script???

    I see on your blog it's working perfectly, but on mine not:
    http://evolutie-spirit.blogspot.com (see on bottom right)

    It is so strange because in the past it worked very well.
    What's happening?

    Many thanks for paying attention, your work it's so valuable,

    Mihail

    ReplyDelete
  20. I'm thinking it could be because of Facebook?

    ReplyDelete
  21. I just saw the error messages, Paul:

    404. That’s an error.
    The requested URL /-23r7imqyxos/tccnweqwpti/aaaaaaaadlc/jgpp-_qbi8y/s1600/facebook.png was not found on this server. That’s all we know.

    404. That’s an error.
    The requested URL /-olvapy5n4du/tccr-ngtkri/aaaaaaaadlw/tyjpdwmupwu/s1600/facebook.png was not found on this server. That’s all we know.

    That's ok, no problem, but where can we find all images to save and upload on our own?

    Please answer me, your advice is so much appreciated!

    All the best,

    Mihail

    ReplyDelete
  22. Love it! I'm using the FB icon on my site: www.chicinthestreets.com. Any chance you could make a matching one for Pinterest??? :)

    ReplyDelete
  23. Same problem as Mihail looks like the icons used for mouseover don't work anymore.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us