Stylish Subscribe Icons Widget For Blogger And WordPress




| 16 comments

subscribe icons widget wordpress bloggerI seem to have published a lot of subscription gadgets on Spice Up Your Blog over the years.To be honest recently I have tried to take a break from such posts.But readers should have a say and that's why I find myself publishing this post.I had come up with a version of a Subscribe Icons gadget I had seen on a lot of sites.Because of my self imposed break from publishing such tutorials I decided to add the code into jsFiddle and send out a Tweet and add it to our FaceBook page so followers could grab it.Since then I have got a lot of requests from people who don't quite understand how to transfer the code on jsFiddle to their blogs.

So in this post I will show in easy steps how to add the subscribe widget to your blog.What is unique about this widget ? I like the icon design with the 'Speech bubble' type style, we also have the name of each service below and finally an opacity hover effect.

OK, for those that can transfer the code you can check out the jsFiddle page here, this can also serve as a demo.Some of the things I added to this were unique Email feed and Pinterest icons, as I just quickly created the images they are not transparent and so wont look great on a dark background.

Lets look at the tutorial.

Add The subscribe Icons Gadget To Blogger


Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below :


Code :

<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("http://3.bp.blogspot.com/-_gwlmCiRPw0/T4MMqbhtV6I/AAAAAAAAAP8/nH_B9B4zuf0/ico-social-rss.png")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("http://1.bp.blogspot.com/-YTyCWTpVs3g/T-9cnlXJ4mI/AAAAAAAAHMA/ptYSLZ1mwsU/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("http://1.bp.blogspot.com/-AEs2xaucVqo/T4MMrfQok6I/AAAAAAAAAQA/tUHW2QEIZXY/ico-social-twitter.png")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("http://1.bp.blogspot.com/-69FO7ybaHo0/T4MMo5Ms1VI/AAAAAAAAAP0/a84dfPIr0NA/ico-social-facebook.png")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("http://1.bp.blogspot.com/-Ke7NQ2PDKgA/T4G-C7pmEfI/AAAAAAAAAOc/tIWtV_pdOeA/googleplus.png")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("http://1.bp.blogspot.com/-zxq13IO5BvU/T-tH1ZdmaII/AAAAAAAAHGE/fPs_JK7ih9c/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.spiceupyourblog.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/spiceupyourblog' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=SpiceUpYourBlog&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/paulcrowepro' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/spiceupyourblog' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/paulcrowe/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/108200902911276741668/posts'>Google+</a></li>
</ul>
<small><a href="http://www.spiceupyourblog.com">Blogger & Wordpress Widget</a></small>

Important Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'SpiceUpYourBlog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.

Add The subscribe Icons Gadget To Wordpress


1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code as shown in the video below :


Code :

<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("http://3.bp.blogspot.com/-_gwlmCiRPw0/T4MMqbhtV6I/AAAAAAAAAP8/nH_B9B4zuf0/ico-social-rss.png")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("http://1.bp.blogspot.com/-YTyCWTpVs3g/T-9cnlXJ4mI/AAAAAAAAHMA/ptYSLZ1mwsU/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("http://1.bp.blogspot.com/-AEs2xaucVqo/T4MMrfQok6I/AAAAAAAAAQA/tUHW2QEIZXY/ico-social-twitter.png")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("http://1.bp.blogspot.com/-69FO7ybaHo0/T4MMo5Ms1VI/AAAAAAAAAP0/a84dfPIr0NA/ico-social-facebook.png")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("http://1.bp.blogspot.com/-Ke7NQ2PDKgA/T4G-C7pmEfI/AAAAAAAAAOc/tIWtV_pdOeA/googleplus.png")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("http://1.bp.blogspot.com/-zxq13IO5BvU/T-tH1ZdmaII/AAAAAAAAHGE/fPs_JK7ih9c/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.spiceupyourblog.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/spiceupyourblog' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=SpiceUpYourBlog&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/paulcrowepro' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/spiceupyourblog' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/paulcrowe/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/108200902911276741668/posts'>Google+</a></li>
</ul>
<small><a href="http://www.spiceupyourblog.com">Blogger & Wordpress Widget</a></small>

Important Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'SpiceUpYourBlog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.

That's it hopefully this widget will get you some more new subscribers !

Drop Your Comments And Questions Below.
AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


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.

16 comments:

  1. Good post i like your site, unfortunately it didn't work for me on Wordpress the graphics were missing, then again i'm thick as they come. I've read lots of advice to follow with my new website and up to now have 3 followers on Twitter and my girlfriend on Google+ (even she has left lol)My mum was from Limerick if it helps for free tips :)

    ReplyDelete
  2. This is great for blogs as they allow users to easily subscribe. Great job on the post.

    ReplyDelete
  3. Wow thats great I am searching for this.But How to resize images?

    ReplyDelete
  4. Thank you so much for this! I have tried so many times to put these on my page & now it finally worked!

    ReplyDelete
  5. Hi, I love your blog and all the helpful tips. I put the HTML in the widget, (wordpress) and the words show up and go to the right places, but there's no graphics. Is there anything I can do to fix that?

    ReplyDelete
  6. Hi, i love your blog! Great blogging tips. I put the widget in and there's no graphics just the words. They all go to the right places though. I'm on wordpress. Is there anything I can do to fix that?
    http://momndaughtersavings.com

    Thank you!
    Jody

    ReplyDelete
  7. Hi Paul, love your blog - thanks! I have pasted the code correctly, but the images don't seem to show up. (same as July's comment above) I'm on blogger. Any help?

    ReplyDelete
  8. I'm also encountering the same issue as some spoke of above. It's not working correctly on a wordpress formet.

    ReplyDelete
  9. Hey Paul, while the path to your images IS good (e.g.- http://1.bp.blogspot.com/-Ke7NQ2PDKgA/T4G-
    C7pmEfI/AAAAAAAAAOc/tIWtV_pdOeA/googleplus.png does get you to the G+ image), when implemented with all the code provided- it shows up with no images on the blog- just text.

    Kinda what you're already being told... not sure if that helps, knowing your path is correct? I'm not able to troubleshoot the HTML!

    ReplyDelete
  10. FWIW, unlike prior commenters- I'm using Blogger. Sorry, forgot to include that little chestnut. ;-)

    ReplyDelete
  11. really thanks for such wonderful thanks..

    ReplyDelete
  12. nice site i really enjoy your site.....
    thanx

    ReplyDelete
  13. Hi Paul, same issue here with my blogger blog - the links work fine, but the widget appears without graphics, would be great, if you could help my previous commentators and me, since the graphics look really nice!

    ReplyDelete
  14. Thanks a lot Paul Crowe,i added this social Sharing Widget in my blog called www.quizvook.com Really Great Post..

    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