Email Subscription Widget For Blogger With Social Share Buttons

A simple and good looking blogger email subscription widget is here for you. It is fast loading and will not effect your page loading time and you can use it easily.

Demo

Recommended for you: Stylish Email Subscription Box for Blogger

 Tell Me How?

• Go to your blogger account and select your blog.
• Navigate to Template and make a backup of your blog.
• Click on Edit html and find below code.

<div class='post-footer-line post-footer-line-1'>

• Now copy below code and paste it under above found code.

<!-- Custom Email Subscription Box -->
<div class='after-post bloggingehow'>
<div class='widget enews-widget' id='enews-ext-2'>
<div class='widget-wrap'>
<div class='enews'>
<h4 class='widgettitle'>Subscribe Us!</h4>
<p>Subscribe our daily newsletter for Free Updates</p>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' name='Email Newsletter' onsubmit='window.open( &apos;http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips/nJeF&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<label class='screenread' for='subbox'>Enter your email address...</label>
  <input id='subbox' name='email' onblur='if ( this.value == &apos;&apos; ) { this.value = &apos;Enter your email address...&apos;; }' onfocus='if ( this.value == &apos;Enter your email address...&apos;) { this.value = &apos;&apos;; }' type='text' value='Enter your email address...'/>
  <input name='uri' type='hidden' value='mybloggingtips/nJeF'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input id='subbutton' type='submit' value='Get It'/>
</form>
</div>
</div>
</div>
<center>
  <span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_sharethis_hcount' displayText='ShareThis'/>
</center>
  <p style=' line-height:0px; font-size:5px; font-weight:bold; text-align:right;padding-top:0px;'><a class='beh-link-style' href='http://www.mybloggingtips.com'>Get this</a></p>
</div>
<style>
.beh-link-style  {text-decoration:none; color:#242424;}
  .after-post {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYWrN8iuLFvGwPhqUHNLHxrN3GTrErAIrW3bn1UmBrNsXBQYeLleweLRjgqWur1lPch_1QJFAOdHXITPFQ5k6T-QWT86MYSKuQYbpktqtA3Qlf5yiyHCtIBw3LBW6lm_NOCywLKqP3pk/s1600/bg-pattern.png&quot;) repeat scroll 0 0 transparent;
    border: medium double #DDDDDD;
    clear: both;
    color: #FFFFFF;
    margin: 30px 0;
    overflow: hidden;
    padding: 25px;
    text-shadow: 0 1px #111111;
}
.after-post p {
    color: #FFFFFF;
}
.after-post form {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1rb2A6s7R3Y2RURuwqzXdoUK1hM2Ctc4ivP2HFijiQTAfARFIY5ZhX3ih0YtGHnktLciSNG-Jn7NwG6FPm8MocH0-CRZnoMUMrPP_VFLsjKgBS6Vr_jM5OyjEm0Ze3bEpl6m_qLmF9Y/s1600/arrow.png&quot;) no-repeat scroll 40px 0 transparent;
    display: block;
    padding: 10px 0 10px 120px;
}
  .enews #subbox {
    margin: 5px -7px 0 0;
    padding: 9px 8px;
    width: 70%;
}

 #subbox input[type=&quot;button&quot;], input[type=&quot;submit&quot;] {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPu9U_O6JpfueAUomy1W46sNVq5hXmza3jBxTUfDZF5G1F0U3QcntlMtK9tBYnbyaMl8eOueaZck54lpTfdAo-zjdNmuhkMkyrD4bTfFI41K8TsRqEc3zUjfzUJQ71axGfhUeHkpmGQk/s1600/gradient.png&quot;) repeat scroll 0 0 transparent;
    border: 1px solid #ED702B;
    color: #FFFFFF;
    cursor: pointer;
    line-height: 19px;
    padding: 8px 10px;
    text-decoration: none;
}
#subbox input[type=&quot;button&quot;]:hover, input[type=&quot;submit&quot;]:hover {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPu9U_O6JpfueAUomy1W46sNVq5hXmza3jBxTUfDZF5G1F0U3QcntlMtK9tBYnbyaMl8eOueaZck54lpTfdAo-zjdNmuhkMkyrD4bTfFI41K8TsRqEc3zUjfzUJQ71axGfhUeHkpmGQk/s1600/gradient.png&quot;) repeat scroll 0 -33px transparent;
    text-decoration: none;
}

   .bloggingehow h4 {
    font-size: 16px;
   color: #DDDDDD;
    font-size: 20px;
    margin: 0 0 20px;
    padding: 0;
    text-shadow: 0 2px #111111;
}
</style>
 <script type='text/javascript'>var switchTo5x=false;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-88a9f357-eb7f-69fe-f4c5-4fe18ad04bda&quot;, doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<!-- Email Subscription Box Ends -->

• Save your template. 

 Customization

• There are chances that you will find more than one instance of above (step 3) of code. Mostly it is 2nd one but check every code until it works for you.
• Change the Blue color text with your feed burner Id.
• If you don't want social Share buttons then remove block of code containing <center>...... </center>
• You are Done!