Home » Blogger Tutorials, Tricks and Hacks » Subscribe Widget V2 with CSS3

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Subscribe Widget V2 with CSS3

Subscribe Widget V2 with CSS3

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


One of the coolest gadgets that you can use to enhance your blog is the Subscribe widget. Fahad has created a new version of his previous work and this one has the most common social media platforms like Twitter, Feedburner, and Facebook.

The Subscribe Widget V2 with CSS3 is similar in nature as version 1, with the same classic look but with upgrades like CSS3 transitions and box shadows. The latest color combination also makes it more professional and fits automatically on your site’s sidebar no matter what the size the latter is.

Adding it to your blog is pretty simple:

  1. Go to Blogger Dashboard > Layout
  2. Add a Gadget
  3. Select HTML/Javascript and copy and paste the code below


/* ---------My Blogger Tips Classic Subscribe Widget V2----------- */
.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
<!-- Start My Blogger Tips Classic Subscribe Widget V2 - http://www.mybloggertips.com -->
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
<!-- End My Blogger Tips Classic Subscribe Widget V2 - http://www.mybloggertips.com -->

4. Replace the following with your own

http://feeds.feedburner.com/USERNAME with your own Feedburner id.
http://twitter.com/USERNAME with your own Twitter id.
http://facebook.com/USERNAME with your own Facebook fan page link.


5. Save.


Check out the LIVE DEMO.


Liked It ? Please Share


2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. mike says:

    Wow, I didn’t know they were doing this? Just when you think you have it down packed, they come out with something else. I will have to check this out for sure. Thanks Mayura for sharing this!

  2. Thanks for the post…I have read out your post..This is full of information…I want to say thanks for sharing the such type of valuable information…..

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here