}

7 Best Stylish Email Subscription Widget For Blogger

7 Best Stylish Email Subscription Widget For Blogger

Email subscription widgets are a great way to help your readers get your latest posts and updates of your blog right into their inbox via email. It also helps you to get a high amount of traffic to your blog and build and grow a loyal community of readers for your blog.

As we know that email marketing is a great way to market your business online and it is not only cheaper but also has numerous benefits of adding an email subscription widget.



So, why not make your blog’s visitor tempted by installing the best, stylish and customized email subscription widget for your Blogger blog.
You just have to follow only the 3 simple steps, and you will be done within no time.

Note: Here you will two parts and in part 1 you will get horizontal email subscription widgets and in part 2, you will get sidebar email subscription widgets for your Blogger blog.

These email subscription widgets have been taken from kingulper blog, whose founder is Mr. Farooq Bhat and his blog mainly comprises of blogging tips and tricks, make money online, social media tips, etc. 

Part 1. Customized Horizontal email subscription widget for Blogger.

Step 1. Login to your Blogger blog and select Template and click on Edit HTML.


7 Best Stylish Email Subscription Widget For Blogger

Step 2. Click inside the template editor section and pressing Control + F search for </article> or <data:post/> and paste the below email subscription widget code as per your choice, or that best suits your blog theme color (although you can customize the colors) just below the </article> or <data:post/> tags.

Step 3. Now, click on- Save in order to save your settings and you are done. 

Customized Horizontal Email Subscription Widget For Blogger No. 1


7 Best Stylish Email Subscription Widget For Blogger

 true' target='popupwindow'>  
 <input name='uri' type='hidden' value=wonderkrish.com/>  
 <input name='loc' type='hidden' value='en_US'/>  
 <input name='knigulper_tracking' type='hidden' value='en_US'/>  
 <div class='knigulper_element'>  
 <input class='knigulper_textinput' id='name' name='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>  
 </div>  
 <div class='knigulper_element'>  
 <input class='knigulper_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>  
 </div>  
 <div class='knigulper_submit'>  
 <input class='knigulpersub_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>  
 </div>  
 <div class='powered_by_knigulper'>  
 <p>Powered by <a href='http://www.knigulper.com/' target='_blank'>Knigulper</a>  
 </p></div>  
 </form>  
 </div>  
 <!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Ends --></b:if>  

Customized Horizontal Email Subscription Widget For Blogger No. 2


7 Best Stylish Email Subscription Widget For Blogger

 <form action='https://feedburner.google.com/fb/a/mailverify' class='wonderkrish.com_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=wonderkrish.com&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return text-decoration:none; width: 210px; border-radius: 100px; height: 31px; }  
 .wonderkrish.com1_button:hover {-webkit-stroke-width: 5.3px; -webkit-fill-color: #89a9cd; -webkit-stroke-color: #89a9cd; text-shadow: 1px 0px 50px white; }  
 .wonderkrish.comsub1_button:active {position:relative; top:1px; }  
 .powered_by_wonderkrish.com1 p {color: #8496a3; font-size: 11px; padding-left: 500px; padding-top: -3px; }  
 .powered_by_wonderkrish.com1 a:link {color: #8496a3; font-weight: bold; text-decoration: none; }  
 .powered_by_wonderkrish.com1 a:visited {color: #8496a3; font-weight: bold; text-decoration: none; }  
 .powered_by_wonderkrish.com1 a:hover {color: #be584a; font-weight: bold; text-decoration: none; }  
 .powered_by_wonderkrish.com1 a:active {color: #8496a3; font-weight: bold; text-decoration: none; }  
 /*====== CSS Horizontal Email Subscription Widget BY www.wonderkrish.com Ends ======*/  
 </style>  
 <!-- HTML5 Horizontal Email Subscription Widget BY www.wonderkrish.com Stats -->  
 <div class='wonderkrish.com1_form-wrapper'>  
 <form action='https://feedburner.google.com/fb/a/mailverify' class='wonderkrish.com1_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=wonderkrish.com&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
 <input name='uri' type='hidden' value=wonderkrish.com/>  
 <input name='loc' type='hidden' value='en_US'/>  
 <input name='wonderkrish.com1_tracking' type='hidden' value='en_US'/>  
 <div class='wonderkrish.com1_element'>  
 <input class='wonderkrish.com1_textinput' id='name' name='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>  
 </div>  
 <div class='wonderkrish.com1_element'>  
 <input class='wonderkrish.com1_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>  
 </div>  
 <div class='wonderkrish.com1_submit'>  
 <input class='wonderkrish.comsub1_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>  
 </div>  
 <div class='powered_by_wonderkrish.com1'>  
 <p>Powered by <a href='http://www.wonderkrish.com/' target='_blank'>Wonderkrish.com</a>  
 </p></div>  
 </form>  
 </div>  
 <!-- HTML5 Horizontal Email Subscription Widget BY www.wonderkrish.com Ends -->  

Customized Horizontal Email Subscription Widget For Blogger No. 3


7 Best Stylish Email Subscription Widget For Blogger

none; }
.powered_by_wonderkrish.com2 a:active {color: #5a86b9; font-weight: bold; text-decoration: none; }
/*====== CSS Horizontal Email Subscription Widget BY www.wonderkrish.com.com Ends ======*/
</style>
<!-- HTML5 Horizontal Email Subscription Widget BY www.wonderkrish.com.com Starts -->
<div class='wonderkrish.com2_form-wrapper'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='wonderkrish.com2_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=wonderkrish.com&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Wonderkrish.com'/> <input name='loc' type='hidden' value='en_US'/>
<div class='wonderkrish.com2_header'>
<h1>Subscribe To Our Newsletter</h1>
<p>Get Our Latest Updates Straight To Your Inbox For <br/>Free! Unsubscribe Any Time Whenever You Want.</p>
</div>
<div class='input_boxes'>
<div class='wonderkrish.com2_element'>
<input class='wonderkrish.com2_textinput' id='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>
</div>
<div class='wonderkrish.com2_element'>
<input class='wonderkrish.com2_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>
</div>
<div class='wonderkrish.com2_submit'>
<input class='wonderkrish.comsub2_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>
</div>
<div class='powered_by_wonderkrish.com2'> <p>Powered by <a href='http://www.wonderkrish.com /' target='_blank'>Wonderkrish.com</a> </p></div></div>
</form>
</div> <!-- HTML5 Horizontal Email Subscription Widget BY www.wonderkrish.com Ends -->
</b:if></b:if>

Customized Horizontal Email Subscription Widget For Blogger No. 4


7 Best Stylish Email Subscription Widget For Blogger


 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <style type='text/css'>  
 /*======= Horizantal Subscription Widget by wonderkrish.com =======*/  
 .f2{background-color:#f7f7f7;margin-top:8px;padding:2px;overflow:hidden;box-shadow: 0 0 10px 5px rgb(226, 215, 215);-moz-box-shadow: 0 0 10px 5px rgb(226, 215, 215); -webkit-box-shadow: 0 0 10px 5px rgb(226, 215, 215); -o-box-shadow: 0 0 10px 5px rgb(226, 215, 215);margin-bottom:8px;margin-left:8px;width:auto;}  
 .FollowByEmail .follow-by-email-inner .follow-by-email-address{height: 38px!important; border: none; padding: 5px; margin-bottom: 5px;margin-left:41px!important; background: #fff; text-align: left;font-family: Georgia, Helvetica, sans-serif;font-size:14px;font-weight:400;width:90%;border:1px solid #dbcece;}  
 .follow-by-email-address{padding-left:39px!important;}  
 #icon{background-image: url(https://4.bp.blogspot.com/-dTUJlqMjKQU/WSh3JXtzExI/AAAAAAAACaI/9Ob9PLUnUe04qnL-4Y0o_GOnGDJCEOiaACLcB/s1600/icon.png);  
 background-position: 6px;  
 background-repeat: no-repeat;  
 }  
 .FollowByEmail .follow-by-email-inner .follow-by-email-submit{font-family: rubik; height: 50px!important; width: 87%; margin-left: 0px; background: #BDB76B; font-weight: 700; text-transform: uppercase; padding: 17px 40px;color:#fff;border:1px solid #dbcece;}  
 .follow-by-email-inner p {font-family: 'Oswald', sans-serif;font-size:13px;font-weight:500;text-align:center; margin-bottom: 10px;color:#bcc4ca;}  
 .FollowByEmail h2 {color:#827459;font-family: 'Metamorphous', cursive;font-size:16px;font-weight:800;margin-top:4px!important;text-align:center;text-transform:uppercase;}  
 .FollowByEmail h3 {color:#000;font-family: 'Open Sans', sans-serif;font-size:13px;font-weight:normal;margin-top:8px;text-align:center;text-transform:none;}  
 .followbytext{font-size:15px;color:white;text-align:center;font-family: 'Oswald', sans-serif;font-weight:700}  
 </style>  
 <!-- HTML5 Horizontal Email Subscription Widget BY www.wonderkrish.com Begin -->  
 <div class='f2'>  
 <div class='subscribe-box section' id='footer-subscribe'><div class='widget FollowByEmail' data-version='1' id='FollowByEmail1'>  
 <h2 class='title'>subscribe to our newsletter</h2>  
 <ul style='-moz-background-inline-policy: continuous; background: none repeat scroll right top; padding: 1px;background-color:#f7f7f7;color:#212121;font-size:13px;'>  
 <marquee direction='left' scrollamount='3' width='90%'>Get Top Insights About Blogging, SEO, Social Media Marketing &amp; Leading Template Designing Trends For Free</marquee></ul>  
 <div class='widget-content'>  
 <div class='follow-by-email-inner'>  
 <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=wonderkrish&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>  
 <table width='100%'>  
 <tr>  
 <td>  
 <input class='follow-by-email-address' id='icon' name='email' placeholder='Your Email Address...' type='text'/>  
 </td>  
 <td width='64px'>  
 <input class='follow-by-email-submit' type='submit' value='Subscribe Now'/>  


Part 2. Customized sidebar email subscription widgets for Blogger

Login to your Blogger blog and click on Layout and select Add a Gadget and paste the below, customized email style codes inside the pop-up menu and save the gadget.


Customized Sidebar Email Subscription Widget For Blogger No. 5
7 Best Stylish Email Subscription Widget For Blogger
 <style type="text/css">  
 .hbzsignup-form {  
   background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;  
   height: 150px;  
   width: 250px;  
   margin: 10px auto 60px auto;  
 }  
 .hbzform-inner p {  
   text-align: center;  
   color: #fff;  
   padding: 10px;  
   font: bold 18px "trebuchet MS","Tahoma";  
 }  
 .hbzemailform {  
   margin: 120px auto 5px;  
   width: 215px;  
 }  
 #hbzemailbox {  
   background: #FEFEFE none repeat scroll 0% 0%;  
   border: medium none;  
   font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;  
   margin-right: 5px;  
   box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);  
   padding: 7px;  
   box-sizing: content-box;  
   height: 12px;  
   vertical-align: top;  
   display: inline-block;  
 }  
 #hbzemailbutton {  
   background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;  
   box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;  
   border: medium none;  
   color: #FFF;  
   cursor: pointer;  
   font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;  
   padding: 6px;  
   border-radius: 5px;  
   height: 27px;  
   display: inline-block;  
 }  
 #hbzemailbutton:hover {  
   background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;  
 }  
 .hbzsocial-icons {  
   margin: 20px 0 0;  
   overflow: hidden;  
   display: block;  
   text-align: center;  
 }  
 .hbzsocial-icons ul {  
   display: inline-block;  
   margin: 0 auto !important;  
   text-align: center;  
   padding: 0px  
 }  
 .hbzsocial-icons ul li {  
   background: transparent !important;  
   border: none !important;  
   float: left;  
   list-style-type: none !important;  
   margin: 0 4px 10px !important;  
   padding: 0 !important;  
 }  
 .hbzsocial-icons ul li::before,  
 .hbzsocial-icons ul li::after {  
   display: none !important;  
 }  
 .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {  
   background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;  
   -moz-border-radius: 50%;  
   -webkit-border-radius: 50%;  
   border-radius: 50%;  
   display: block;  
   height: 38px;  
   overflow: hidden;  
   text-indent: -999px;  
   transition: all 0.25s linear 0s; width: 38px;  
 }  
 .hbzsocial-icons ul li.social-facebook a {  
   background-color: #3b5998;  
   background-position: -60px 3px;  
 }  
 .hbzsocial-icons ul li.social-twitter a {  
   background-color: #00aced;  
   background-position: -253px 3px;  
 }  
 .hbzsocial-icons ul li.social-gplus a {  
   background-color: #dd4b39;  
   background-position: -93px 3px;  
 }  
 .hbzsocial-icons ul li.social-pinterest a {  
   background-color: #cb2027;  
   background-position: -157px 3px;  
 }  
 .hbzsocial-icons ul li.social-rss a {  
   background-color: #F87E12;  
   background-position: -189px 3px;  
 }  
 .hbzsocial-icons ul li a:hover {  
   background-color: #333;   
 }  
 .hbzsocial-like {  
   display: block;  
   text-align: center;  
 }  
 .hbzsocial-like tbody, .hbzsocial-like tbody tr {  
   display: block;  
 }  
 .hbzfb-likes {  
   display: inline-block;  
   padding-bottom: 15px;  
   margin-right: 5px;  
 }  
 .hbztw-follow {  
   display: inline  
 }  
 </style>  
 <div>  
  <div class='hbzsignup-form'>  
  <div class='hbzform-inner'>  
   <p>Sign Up for Email Updates</p>  
  </div>  
  <div class='hbzemailform'>  
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
   <input name='uri' type='hidden' value='[Your Blog uri]'/>  
   <input name='loc' type='hidden' value='en_US'/>  
   <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>  
   <input id='hbzemailbutton' title='' type='submit' value='Sign up'/>  
   </form>  
  </div>  
  </div>  
  <div class="hbzsocial-icons">  
  <ul>  
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>  
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>  
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>  
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>  
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>  
  </ul>  
  </div>  
  <table class='hbzsocial-like'>  
  <tbody>  
   <tr>  
   <td class='hbzfb-likes'>  
    <div id="fb-root">  
    </div>  
    <script>(function(d, s, id) {  
  var js, fjs = d.getElementsByTagName(s)[0];  
  if (d.getElementById(id)) return;  
  js = d.createElement(s); js.id = id;  
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";  
  fjs.parentNode.insertBefore(js, fjs);  
 }(document, 'script', 'facebook-jssdk'));  
    </script>  
    <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">  
    </div>  
   </td>  
   <td class='hbztw-follow'>  
    <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>  
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');  
    </script>  
   </td>  
   </tr>  
  <tbody>  
  </table>  
 </div>   

Customized Sidebar Email Subscription Widget For Blogger No. 6



7 Best Stylish Email Subscription Widget For Blogger

 <style type="text/css">  
 .hbzsub {  
   background-color: #1E293B;  
   width: 100%;  
   height: 100%;  
   box-shadow: 0px 0px 10px rgb(30, 41, 59);  
 }  
 .hbzemailform {  
   width: 239px;  
   margin: 10px auto;  
 }  
 .hbzform-inner h4 {  
   color: rgb(255, 255, 255);  
   text-align: center;  
   padding: 10px;  
   font: bold 18px/40px "trebuchet MS","Tahoma";  
 }  
 #hbzemailbox {  
   background-color: #FFF;  
   border: 1px solid #FFF;  
   border-radius: 7px 0px 0px 7px;  
   height: 20px;  
   padding: 6px;  
   box-sizing: content-box;  
 }  
 #hbzemailbutton {  
   background-color: #F0553B;  
   border: 1px solid #F0553B;  
   color: #FFF;  
   height: 34px;  
   border-radius: 0px 7px 7px 0px;  
   margin-left: -4px;  
   font-weight: 600;  
   cursor: pointer;  
 }  
 #hbzemailbutton:hover {  
   background-color: #1E293B;  
   border: 1px solid #FFF;  
   box-shadow: 0 0 5px #ddd;  
 }  
 .hbzsocial-like {  
   background: transparent url("https://3.bp.blogspot.com/-2hqsqwGQg2M/VsCLsiFb2sI/AAAAAAAAAMY/7jkBsN8tVIg/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;  
   width: 250px;  
   height: 120px;  
   margin: 10px auto;  
 }  
 .hbzfb-likes {  
   margin-top: 90px;  
   margin-left: 20px;  
   position: absolute;  
   display: block;  
   box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);  
 }  
 .hbztw-follow {  
   display: block;  
   margin-left: 152px;  
   position: absolute;  
   margin-top: 89px;  
   box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);  
   height: 20px;  
 }  
 </style>  
 <div class="hbzsub">  
  <div class='hbzsignup-form'>  
  <div class='hbzform-inner'>  
   <h4>Get Posts In Your Inbox</h4>  
  </div>  
  <div class='hbzemailform'>  
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
   <input name='uri' type='hidden' value='[Your Blog uri]'/>  
   <input name='loc' type='hidden' value='en_US'/>  
   <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>  
   <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>  
   </form>  
  </div>  
  </div>  
 <table class='hbzsocial-like'>  
  <tbody>  
   <tr>  
   <td class='hbzfb-likes'>  
    <div id="fb-root">  
    </div>  
    <script>(function(d, s, id) {  
  var js, fjs = d.getElementsByTagName(s)[0];  
  if (d.getElementById(id)) return;  
  js = d.createElement(s); js.id = id;  
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";  
  fjs.parentNode.insertBefore(js, fjs);  
 }(document, 'script', 'facebook-jssdk'));  
    </script>  
    <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">  
    </div>  
   </td>  
   <td class='hbztw-follow'>  
    <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>  
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');  
    </script>  
   </td>  
   </tr>  
  </tbody>  
  </table>  
 </div>   

Customized Sidebar Email Subscription Widget For Blogger No. 7
7 Best Stylish Email Subscription Widget For Blogger
 <style type="text/css">  
 .hbzsub {  
   background-color: rgb(87, 98, 105);  
   width: 100%;  
   height: 100%;  
   padding: 5px;  
   box-shadow: 0px 0px 5px rgb(87, 98, 105);  
 }  
 .hbzform-inner {  
   text-align: center;  
   color: rgb(255, 255, 255);  
   font: bold 16px "trebuchet MS","Tahoma";  
 }  
 .hbzemailform {  
   width: 240px;  
   margin: 10px auto;  
 }  
 #hbzemailbox {  
   background-color: #798187;  
   color: #FFF;  
   width: 208px;  
   border: 1px solid #697780;  
   padding: 15px;  
   text-align: center;  
   height: 18px;  
   box-sizing: content-box;  
 }  
 #hbzemailbutton {  
   background-color: rgb(243, 93, 92);  
   border: 1px solid rgb(215, 84, 83);  
   color: rgb(255, 255, 255);  
   width: 240px;  
   font: bold 16px "trebuchet MS","Tahoma";  
   padding: 15px;  
   text-align: center;  
   height: 50px;  
   margin: 10px auto;  
   cursor: pointer;  
 }  
 #hbzemailbutton:hover {  
   background-color: #E64C4B;  
   border: 1px solid #BF4A49;  
 }  
 .hbzsignup-form {  
   margin-top: 15px;  
 }  
 .hbzsocial-icons {  
   overflow: hidden;  
   text-align: center;  
   border-bottom: 1px solid rgb(133, 133, 133);  
   width: 230px;  
   display: block;  
   margin: 20px auto;  
 }  
 .hbzsocial-icons ul {  
   margin: 0px auto !important;  
   text-align: center;  
   padding: 0px !important;  
   display: inline-block;  
 }  
 .hbzsocial-icons ul li {  
   background: transparent none repeat scroll 0% 0% !important;  
   border: medium none !important;  
   float: left;  
   list-style-type: none !important;  
   padding: 0px !important;  
   margin: 0px 2px !important;  
 }  
 .hbzsocial-icons ul li::before,  
 .hbzsocial-icons ul li::after {  
   display: none !important;  
 }  
 .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {  
   background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;  
   -moz-border-radius: 50%;  
   -webkit-border-radius: 50%;  
   border-radius: 50%;  
   display: block;  
   height: 34px;  
   overflow: hidden;  
   text-indent: -999px;  
   transition: all 0.25s linear 0s;  
   width: 34px;  
 }  
 .hbzsocial-icons ul li.social-facebook a {  
   background-position: -62px 1px;  
 }  
 .hbzsocial-icons ul li.social-facebook a:hover {  
   background-color: #3b5998;   
 }  
 .hbzsocial-icons ul li.social-twitter a {  
   background-position: -254px 1px;  
 }  
 .hbzsocial-icons ul li.social-twitter a:hover {  
   background-color: #00aced;   
 }  
 .hbzsocial-icons ul li.social-gplus a {  
   background-position: -95px 0px;  
 }  
 .hbzsocial-icons ul li.social-gplus a:hover {  
   background-color: #dd4b39;   
 }  
 .hbzsocial-icons ul li.social-pinterest a {  
   background-position: -159px 1px;  
 }  
 .hbzsocial-icons ul li.social-pinterest a:hover {  
   background-color: #cb2027;   
 }  
 .hbzsocial-icons ul li.social-rss a {  
   background-position: -190px 0px;  
 }  
 .hbzsocial-icons ul li.social-rss a:hover {  
   background-color: #F87E12;   
 }  
 </style>  
 <div class="hbzsub">  
 <div class="hbzsocial-icons">  
  <ul>  
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>  
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>  
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>  
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>  
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>  
  </ul>  
  </div>  
  <div class='hbzsignup-form'>  
  <div class='hbzform-inner'>  
   <h4>Subscribe to my Newsletter</h4>  
  </div>  
  <div class='hbzemailform'>  
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
   <input name='uri' type='hidden' value='[Your Blog uri]'/>  
   <input name='loc' type='hidden' value='en_US'/>  
   <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>  
   <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>  
   </form>  
  </div>  
  </div>  
 </div>  

Step 3. Configuration for Subscription Box.
Replace [Your Blog URL] with Your blog URL which is basically your Feed title. You can get it by visiting http://feedburner.google.com and then navigate to Publicize > Email Subscription and find your URL value in given box. For eg: https://feedburner.google.com/fb/a/mailverify?uri=Wonderkrish and

Replace [Fb url] with your Facebook page URL. 
For eg: https://www.facebook.com/wonderkrish

Replace [Twitter url] with your twitter page URL. 
For eg: http://www.twitter.com/wonderkrish

Replace  [Google+ url] with your google+ page or account URL. 
For eg: https://plus.google.com/123456789

Replace [RSS url] with your RSS URL. 
For eg: http://feeds.feedburner.com/wonderkrish

Replace [Pinterest url] with your Pinterest URL.

Replace [Twitter Username] with your twitter account username. 
For eg : @Wonderkrish

Replace [Fb Page Name] with your Facebook Page Name. 
For eg : Wonderkrish




Note: Minimum Sidebar width required - 230px.


4 comments:

  1. I am actually gonna try one because the feed burner one kinda sucks, thank you for writing

    ReplyDelete
    Replies
    1. If you find any problem on adding the scripts, just leave a comment and I will happy to help you. Thanks

      Delete
  2. Online marketing by email can increase your sales and help you attract recurring customers, but you have to make sure your email addresses are accurate and working. Use an email verifier to check your lists.

    ReplyDelete
    Replies
    1. Thanks Jane for your suggestion, I will surely use one.

      Delete