Beautiful Subscribe Box with Social Buttons and Hover Effect for Blogger

Hey guys, Here I come with another cool subscribe box with social buttons and mouse hover effect. This beautiful widget will attract visitors and will help you increase your social following and email subscribers. This widget will make your blog look professional and it loads really fast thus lowering your blog load time.

Live Demo

Features

Social Buttons; Facebook, Twitter, RSS
Email Subscription Box
Hover Effect
Loads really fast

How to Add this widget to Blogger

Go to Blogger > Layout
Click on 'Add a Gadget'
Choose HTML/javascript
Copy paste the code given below inside it.

<style type='text/css'>

    .a51 a{
        color: #6e6e6e;
        font: bold 12px Helvetica, Arial, sans-serif;
        text-decoration: none;
        padding: 7px 12px;
        position: relative;
        display: inline-block;
        text-shadow: 0 1px 0 #fff;
        -webkit-transition: border-color .218s;
        -moz-transition: border .218s;
        -o-transition: border-color .218s;
        transition: border-color .218s;
        background: #f3f3f3;
        background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
        background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
        border: solid 1px #dcdcdc;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }
    .a51 a:hover {
        color: #333;
        border-color: #999;
        -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
        -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .a51 a:active {
        color: #000;
        border-color: #444;
    }

    .a51bar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

    .a51bar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

    .a51bar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

    .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 130px; height:30px;   border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;}

    .a51bar .emailsub .emailupdatesform input.emailupdatesinput:hover{

    border-color: #999;
        -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
        -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .a51bar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
        -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
        -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
    }

    .a51bar .emailsub .emailupdatesform input.joinemailupdates{
    border: solid 1px #dcdcdc;
        background: #F3F3F3;
       font-family:Helvetica, Arial;
    text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
      border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }

    .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 145px; height:28px;   border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;}

    .a51bar .emailsub .emailupdatesform input.joinemailupdates{
    border: solid 1px #dcdcdc;
        background: #F3F3F3;
       font-family:Helvetica, Arial;
    text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
      border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }

    </style>

    

    <div class="a51" style="padding: 0pt 0pt 0pt 5px;">
    <table><tbody><tr>

    <td>
    <a   href="http://www.feeds.feedburner.com/The-Area51" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdZ8ikflW3s0xgmk6lhwFlI3ulnELsp6-R2kpvms1CPFvW9Yn_f4V3EOQJslT-lLG9c3ozS29cVjpVJtBpHKh2Z6TJMMDEzkpAvnFNTTVbx-7OhlhWIsfEv0ByuZfUTxAP7E1OU_GSss/s1600/rss.png" border="0" /></a>
    </td>

    <td>

    <a style="margin-left:5px;"href="http://www.twitter.com/jimmieluthra" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixQaUl5Qs-VluSg25aN9uSqvYIro5G6R-rJlBszCUoM_FWAZo61s6YYp4uCjAbSuPSFDfw9W3qFT1Fd59z8FXgZ71Y7Py7_zSNjuoDKbOhqtKD-4LYFDHrWR_N6ysun4ujupxWentCO0/s1600/twitter.png" border="0" /></a>
    </td>

    <td>
    <a style="margin-left:5px;"href="http://www.facebook.com/thearea51blog" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRTQOm27faziYzbwqvAn-iEaCRrfpiqMHvLdSQy335Q7WCsic0yBHOEDQnO8k1L6JYb4O-8gGIk_pDEEdvto3Jka434o6MaHkP_gguNL4PvS-6yQd00JZcNo-QIscQhSAiSiaJjlK0vs/s1600/facebook.png" border="0" /></a>
    </td>

    </tr></tbody></table>
    <div class="a51bar">
    <div class="emailsub">
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" type="text" /><input value="The-Area51" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>

Make the following changes to the code

Replace http://www.feeds.feedburner.com/The-Area51 with your RSS Feed URL.
Replace Jimmieluthra with your Twitter Username.
Replace thearea51blog with your Facebook Fan Page URL
Replace The-Area51 with your Feedburner Username