Subscribe Widget V2 with CSS3

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

<style>

/* ---------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;}

</style>

<!-- 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWzC1HcuAvt_-PBk2W65mAOXEhrNmHAqjEAL2POyiBjaX8rdksa1QEqq3LA2marzBp9_-Tx17UbJczR9HOhSUxu0i2kke6TplrPLUk77ui5YeVd6q1feN2iie9r_eyBJRBdlO-z0YDpj-/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>

</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>

<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJ14etP4d0b49KZtMjYjBeQ6Pn2qiaKLolPSWeNX6plMywZtsGy2cCXf0gbtEKTK9SX8UKSF0LpYGhQAjNdQVtS58Xy1omNsBgcFiIX4RsVjAaaHGUbIO4HHap5kxGzF1MohVhuokjnQI/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>

</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>

<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMp-o2O6U3ez4rWXO8CQ-u7e8Okc5NLDftFnczTH0aIvRwsdJ2e1zCj7X-HM4KrCnixDdr60KIQex8wXbSGKa2Dc7CyPR0wdE4tx0983xkUdZGG-EVc1c-LbbyP_Xf6Ir7kAVmwO61IEy/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>

</div>

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