Cool Subscribe Box with Social Buttons and Hover Effect for Blogger

Hey Guys, Checkout this cool Subscribe box widget with hover effect for blogger .

If you want to add this widget to your blog just follow this simple steps.

1. Go to Blogger Dashboard > Layout
2. Click on Add a gadget
3. Choose HTML/Javascript
4. Copy Paste the code given below inside the 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>

    

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

    <td>
    <a   href="http://www.feeds.feedburner.com/zgamerx" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMgjCMGNNYnpE7Nyzotcj-ei5HPutY1NIQZYAxJ-FeLu9gAJb_ONGDWaxEhWTp20F3kb_myY0G5YZvAGUkP9hxGqI8atdfFV4WW2azBnfiiCARFC3eNuaJhDek0iATYxLaK-35wlh3iY/s1600/rss.png" border="0" /></a>
    </td>

    <td>

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

    <td>
    <a style="margin-left:5px;"href="http://www.facebook.com/zgamerxs" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFqZRfFTfmQidUuGCHIe9sqYBR-h7y5E2n5UnrYVjS9_3og6g6GHNQ6KAgwvNHQkdHGTqwi0xevEPPjVXsZIFSEx6KYdtBzax5C-AquPpxP_Ko58sWpFRKEZCy7nltHo0BAkmFk2dl9YY/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=zgamerx', '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="zgamerx" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>

Customisations

Replace http://www.feeds.feedburner.com/zgamerx with your RSS Feed URL.
Replace vishalassassin with your Twitter Username.
Replace zgamerxs with your Facebook Fan Page URL
Replace zgamerx with your Feedburner Username

5. Click save

That's all

Have any problem, please comment

Saturday, 23 March 2013

Cool Subscribe Box with Social Buttons and Hover Effect for Blogger

No comments:

Post a Comment

LIKE US

Popular Posts

Tags

Most Commented

Contact Form