Three Cool Blog Subscription Gadgets With Unique Icons

Posted : Wednesday, May 04, 2011 | Post Author : Paul Crowe | 25 comments

This week while doing a few jobs on blogs i added some very cool subscription icons to the sidebars.The icons link to the Rss Feed and Facebook and Twitter profiles for the blog.Pop the new Blogger Follow By Email Form gadget below the icons and you have all the main subscription options offered to readers.Anyway the icons look great one set is in the design of Polaroid photographs, the second set is the Polaroid Photograph Design but with a worn vintage feel and the third are very bright and colorful with a slight 3d look.I thought some readers of Spice Up Your Blog might like them so i have the code here and instructions to add them to your blog.The demo icons are connected to our Rss, Facebook and Twitter so you can check them out and subscribe, Like and Follow if you ain’t already.

Three Sets Of Cool Subscription Icons

 

The Polaroid Icons :

The Polaroid Icons Code :

(Replace The URLs In Red With Your Rss, Facebook And Twitter)

<a href=”http://feeds.feedburner.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://2.bp.blogspot.com/-SJF6UBDPtmU/TcCnWl9-gaI/AAAAAAAADlg/NVgsWS3Kefk/s1600/rss.png” /></a><a href=”http://facebook.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://1.bp.blogspot.com/-23R7iMQYXos/TcCnWEQwPtI/AAAAAAAADlc/jGPp-_QBi8Y/s1600/facebook.png” /></a><a href=”http://twitter.com/paulcrowepro” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://2.bp.blogspot.com/-QBSeBdg2pn8/TcCqOfT-6SI/AAAAAAAADlo/ks47LssGaRs/s320/twitter.png” /></a><br/><a href=”http://www.spiceupyourblog.com” target=”_blank”><small>Blog Gadgets</small></a>

 

The Vintage Polaroid Icons

The Vintage Polaroid Icons Code :

(Replace The URLs In Red With Your Rss, Facebook And Twitter)

<a href=”http://feeds.feedburner.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://1.bp.blogspot.com/-34I9Zv8nr0k/TcCsCJjlt3I/AAAAAAAADl0/Hmioi9iUEnU/s1600/rss.png” /></a><a href=”http://facebook.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-OlVAPY5N4DU/TcCr-NGtkrI/AAAAAAAADlw/TYJpdwMUpwU/s1600/facebook.png” /></a><a href=”http://twitter.com/paulcrowepro” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://2.bp.blogspot.com/-zpBYTS7b0Kw/TcCsDEBdHqI/AAAAAAAADl4/j3TvkL4luC0/s1600/twitter.png” /></a><br/><a href=”http://www.spiceupyourblog.com” target=”_blank”><small>Blog Gadgets</small></a>

 

The Bright Icons :

The Bright Icons Code :

(Replace The URLs In Red With Your Rss, Facebook And Twitter)

<a href=”http://feeds.feedburner.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-BsvSKRbPsZw/TcCnMiRrvNI/AAAAAAAADlU/NjSdKTKHLMc/s1600/Rss.png” /></a><a href=”http://facebook.com/spiceupyourblog” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://2.bp.blogspot.com/-JqnoBycAe6w/TcCnKcGCfYI/AAAAAAAADlQ/V4Y0WiLoFkI/s1600/facebook.png” /></a><a href=”http://twitter.com/paulcrowepro” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-bhBIb9wesLk/TcCnNNCZ0BI/AAAAAAAADlY/gsA0iV3c2Yk/s1600/Twitter.png” /></a><br/><a href=”http://www.spiceupyourblog.com” target=”_blank”><small>Blog Gadgets</small></a>

Add The Subscription Icons To Blogger

Step 1. In Your Blogger Dashboard Click Design > Add A Gadget > Choose Html/Javascript.

Step 2. Paste The Code For The Buttons You Want Into The Html/Javascript Gadget (Make sure to change the URLs) and save.You can drag and drop the gadget into place back on the design page.

Icons Credit – Social Icon Studio

That’s your subscription options looked after check out some of our Social Bookmarking Gadgets.

Drop Your Comments and Questions Below.

 

25 comments:

  1. Thats cool, I appreciate your blog 😀 as i am also good web designer i have already implemented same idea haha 🙂 But i am here to appreciate you 🙂

    ReplyDelete

  2. These are sooo nice. The “bright” set seems to be the most fit for most blog designs. Added them, really simple 🙂

    ReplyDelete

  3. hello paul.. can u do tutorial bout add facebook comment like urs? comment using bla bla bla.. i intereted with it! thanks 🙂

    ReplyDelete

  4. Great post! I was looking for a widget like this. I was using 3 widgets previously in my blog (facebook, feed burner and twitter) and it kinda looked so messy. But now it looks clean. Just had to increase the width of my right side bar but it was worth it 😀

    ReplyDelete

  5. nice post,thanks for your tips,appreciate your articles very much

    ReplyDelete

  6. Vanessa D. AlexanderMay 16, 2011 at 5:46 PM

    Just wanted to say thanks for the vintage Polaroid icons. They worked out beautifully. Nice blog you have here.

    ReplyDelete

  7. Equipo: Hannah/Noah/HilkeMay 16, 2011 at 9:27 PM

    Thanks a lot

    ReplyDelete

  8. Hi, Great blog. For some reason I don’t have the HTML/Javascript gadget that i can add??

    ReplyDelete

  9. @ Urban – The html/Javascript option is there on all blogs you mush have just missed it.

    ReplyDelete

  10. I could use some help. I followed the directions, but the facebook feed won’t work. Any suggestions?

    I love your blog! The information you post has been very, very helpful.

    ReplyDelete

  11. Thank you – I am just getting started and these icons/gadgets are lovely…

    ReplyDelete

  12. Hi!

    I am trying to figure out in Blogger how to add the social media icons to my header . . .any ideas?

    ReplyDelete

  13. @ Mary – Were exactly do you want the icons in your header ?

    ReplyDelete

  14. @Paul: I do some blog design and someone asked me about it in blogger… like this site: http://keepinitreal-gina.com

    I think it may be a matter of super imposing smaller widgets over the header widget…. but I’m not sure.

    There are so many tutorials for WordPress but nothing for blogger.

    🙂

    ReplyDelete

  15. @ Mary – I looked at the blog and the icons are at the top of the sidebar with a regular header ?

    ReplyDelete

  16. @Paul: Yes. They are. I read on blogger (in a forum) about moving 2 smaller “add page elements” boxes up and over the real header widget.

    I think it’s a half header, half icons deal . . .

    ReplyDelete

  17. @ Mary – The link in your comment is a blog with a regular header unless I’m seeing things, wouldn’t be the first time 😀

    First up to add widgets and gadgets above or below the header we simply have to allow it.If you look for ‘maxwidgets’ in your blogs html you will find a section with something like –

    class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’

    Change maxwidgets to 5 and the no to yes.Now you are allowing 5 widgets to be added above or below the header and the ‘add a gadget’ box will be visible.

    Also, you can split your header into two sections, so on the left you have the actual header and on the right you have an ‘Add A gadget’ section.This is how i have the ad in the right of the header here.This is a link to the tutorial – <a href=”http://www.spiceupyourblog.com/2010/03/adsense-beside-header-blogger-blogs.html”>Two Column Blogger Header</a>

    Hope all that helps !

    ReplyDelete

  18. @Paul: YOU ROCK! That’s what I was talking about. Thank you so much!

    ReplyDelete

  19. Hi – thanks ever so much for posting these subscription icons – they are fab. I just have one question, is it possible to change the size of the gap in between them so it is smaller? They don’t quite fit into my sidebar without the third one being underneath the other two?

    Thanks ever so much!

    ReplyDelete

  20. Do you offer a vintage version of the mail icon? I just added the three vintage polaroid icons and would love to add mail to it. Thx!

    ReplyDelete

  21. Annie (lady M) I had the same problem and was able to adjust the size not too long ago. Easier than I imagined. I clicked the edit tool, which opened the ‘Configure HTML/Java Script’ box. In the code, look for the numbers associated with the widget dimensions – border=”0″ width=”64″ height=”82″ and change the width and height numbers of each to a size of your choosing. I decided on 52×72 – fits perfectly without distortion. I just hope I did not mess up anu functionality…

    ReplyDelete

  22. I love the Vintage Polaroid ones..a Pinterest button like that would be awesome!

    ReplyDelete

  23. I agree! the pinterest button like that would be awesome! please help to get it and many thanks for your posts!

    ReplyDelete

  24. I want to reduce the size of the size of those icons.. Please help

    ReplyDelete

  25. this is a nice and interesting post

    ReplyDelete