Stylish Subscribe Box For Blogger

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

Demo

Follow These Simple Steps;

• Login to Blogger
• Goto Layout
• Add a New Widget

Paste the Following Code;

<style>
    #bp-social {
    width: 300px;     }
    .bp-iconset{
    padding: 5px;
    }
    .bp-iconset img:hover{
    opacity:0.8
    }
   .fb{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    text-align: center;
   }
    .facebook{
   text-align: center;
   padding-top: 10px;
   width:80%;
    }
    .twitter{
    padding-top: 10px;
    text-align: center;
    }
   .addthis_counter{
   float: left;
   height: 60px;
   padding-left: 60px;
   }
   .email-subscribe-emailbox form {
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;border: 0;
    }
    .email-subscribe-emailbox input.emailu {
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    color: #999;
    padding: 7px 10px 8px;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid #ccc; 
    }
    .email-subscribe-emailbox input.emailu:focus {
    color: #333;
    }
    .email-subscribe-emailbox input.submitu {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: black;
    padding: 7px 14px;
    font-weight: bold;
    font-size: 12px;
    float: right;
    cursor: pointer;
    }
    .email-subscribe-emailbox input.submitu:hover {
    text-decoration: none;
    }
</style>
    <div id="bp-social">
    <div class="bp-iconset">
    <center>
    <a style="margin-right: 10px;" href="Facebook Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEV9RyS_tbsW5bPA01-AY88eDasGX4rUJvE-8fS6OcHHUu-DqXAHHUy7IoFrSQZKLHr8t1BFsHUzdsua0APa2JK7u94u0hd3HoHsUtk9m9DG75k2JO-ZKMW1UQSot2JLBMJbPCAvTYTYFr/s1600/facebook.png" width='50px' height='65px' title='Facebook'/></a>
    <a style="margin-right: 10px;" href="Twitter Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDVYsZviTvvHlt3L-MLcrDSd4KpeD2_8AZSfSdl_Fr0VFeXvbqIpnWDyPnE86u9VHKRkTtE_pNdueIL5C7t5ZTni75RVq4mm9N75u9kLHGKnt9TD21K6QBMfaU6V2yYXFUmeVTKL3d6Mg/s1600/twitter.png" width='50px' height='65px' title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="Google Plus Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9GRQ0rG56lvFOea9HnI95Oj09juHWenB08kaX2VIbViac1Ub3yUL-aGXm4WiA9dXIQEKARikaEtTF_1jMnpG0y4xFMsMOyZL3UCYzGKD2Sgh-GcbRhgyGC6Y68i1FLf6sdl_EKCTyTNY/s1600/googleplus.png" width='50px' height='65px' title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="Pinterest Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtnj-cQRk8cVwcQzL8abUty6gdn1OCOS5lkblADmYKj77nnwVyYgjPRgHzAWySAeRxI_gIK-P33WrFr5hjnxgetj6BeAuE1FEz2mz7JR7lFNbpyvTt1wkH76Dy6F9B1QfuB0KuAe3Hgcy/s1600/pinterest.png" width='50px' height='65px' title='Pinterest'/></a>
     </center>
    <center>
   <a style="margin-right: 10px;" href="RSS Feed Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_YONHJOmp_NxBApcwiGWnYt7pc4azXUbyPaEp3m79clDE5ezyjrfFx4pT81GZYjWehMwV2ZjrEFdY84yWo-mq0z8FC-y8NHBQBuGkgLu39gaj4nW8ywSRkyjN4RjbhY2DEslg4le2GEZ/s1600/rss.png" width='50px' height='65px' title='RSS Feed'/></a>
    <a style="margin-right: 10px;" rel="me" href="Flickr Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8syb8dxXS0FlLKYZ85-BkTIf8lVLkr71TC7rczFrX3g0ly5jb4PE932F-BEU3fVbY4WhMZMh_kQe8TMqfM28oB1feIYGVfDwl79wDF8cdKN4L9414cIHs_J6ldnnYxz0cF70hHv5DzR5_/s1600/flickr.png" width='50px' height='65px' title='Flickr'/></a>
    <a style="margin-right: 10px;" href="Linkedin Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSHgU8MMkkfpoeVpo-Yt-Cr1XXjjdPfIQGqocipQtOWs06TA7woPUKySFKUydCsaJUhdjNdsyam6jzXgXA2ViiEnFD0Lizn1cXLCYrKLWR-0j4KviG18p9lIFW3ZwLirUI-yUbXdE88RD/s1600/linkedin.png" width='50px' height='65px' title='Linkedin'/></a>
    <a style="margin-right: 10px;" href="Youtube Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjShKzy9Emtf4pEfjuGJ8H23yfsorz5Dztxu8r4hTC2xkSNs47b7eRUnPH8DebNrJVKIVvmAqlUOTE4SEGE76ud6QYL3pHhDA1FdZhdzWNoUZ8yB89ah9lZdURfOtKtXoeqo4gq_YMOZ-CH/s1600/youtube.png" width='50px' height='65px' title='Youtube'/></a>
    </center>
<div class="fb">
    <div class="facebook">
<a class="addthis_counter"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTipsNTricksForBloggerLovers&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=271817639530563" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:60px;" allowtransparency="true"></iframe>
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
    </div>
</div>
    <div class="twitter">
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=ProTipsNTricks&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
     <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerprofessional', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="bloggerprofessional"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    </div>
    </div>

Customizations:

Change The Width: 300px; according to the Width of Your Sidebar
Change TipsNTricksForBloggerLovers with your Facebook Page URL (after facebook.com/??????)
Change ProTipsNTricks with Your Twitter Username.
Change bloggerprofessional with FeedBurner Subscribe URL.
Change  Page URL with Your Own Social Sites URL.