Cool Subscribe Box with Hover Effect for Blogger

Recently I found this cool subscribe box which contains both Email subscribe and social buttons with Hover effect. Today I'm sharing this cool widget and It is fully compatible with Blogger.

subscribe box with hover effect for blogger

Also Checkout some other cool Subscribe box widgets.
To see Live working demo of this widget Click the button.

Live Demo button

Below is a Step by Step guide which will help you to Install this widget on your Blog.

How to Add this Widget to Blogger 

Step 1: Login to Your Blogger Account, From Dashboard Go to Layout > Add a Gadget.

Step 2: Now choose HTML/Javascript 

blogger html/javascript widget

Step 3: Copy Paste the following code inside HTML/Javascript widget.
<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>


<!--[if IE 8]> <style>
.a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   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 5px; 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> <![endif]-->





<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="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/s1600/rss.png" border="0" /></a>
</td>

<td>

<a style="margin-left:5px;"href="http://www.twitter.com/a51blog" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/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="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/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 == &#39;&#39;) {this.value = &#39;Submit email...&#39;;}" onfocus="if (this.value == &#39;Submit email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="The-Area51" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>

Step 4: Now make the following changes


  • Change thearea51blog with your facebook page.
  • Change a51blog with your Twitter page
  • Change The-Area51 with your Feedburner Id

Step 5: Save the widget

Now you've successfully installed the widget on your blog. If you are having any problems installing this widget then you can contact us or just leave a comment below.

SHARE

About Jimmie Luthra

Jim Luthra is a Third Officer in Merchant Navy and Chief Editor of The-Area51.com, He is a Blogger, Guitarist, Painter, Book Lover, Tech Geek, Basket Ball Lover, Traveller and Fitness Freak. He loves Traveling and Adeventure Sports.
    Blogger Comment
    Facebook Comment