Email Subscription Widget Below Every Blogger Post

Telling your visitors for Email Subscription or follow your blog is great method for getting huge traffic and make your visitors to be always connected with your blog for each and every update. Before I have shared such social media widgets for sharing and bookmarking but in this post I am going to share with you a widget for suggesting your blog visitor to be connected with you and get every update from your blog by subscribe or follow your blog and also help you to increase your blog followers. There are five different options for connecting your visitors such as Get Email Updates, Facebook, Twitter, Youtube, and Google+.

Email Subscription Below Post

Recommendations>>

  1. Analyzing Tools to Become Social Media Expert New !!
  2. Avoid Robots to Crawl Archive in Blogger

How to Install Email Subscription Box Below every Post.


Now I will tell you step by step how you can install this Subscription box below every blogger post for increasing your blog follower. Follow the give below step to install this widget to you blog.

Go to Blogger Dash Board > Template >
Backup Your Template
> Edit HTML > Click on the Format Template >
Find the Following code

<data:post.body/>

And paste this below code after the founded above code <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

form.feedburner {

    margin: 20px 0 0;

    display: block;

    clear: both;

}

.helperbloggerstyle {

    background: url(http://2.bp.blogspot.com/-YHHzZ6_RLMU/T-1kl7RxNEI/AAAAAAAACD8/-0FyeWj00vo/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent;

    padding: 7px 15px 7px 35px;

    color: #666;

    font-weight: bold;

    text-decoration: none;

    border: 1px solid #D3D3D3;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    -moz-box-shadow: 1px 1px 2px #CCC inset;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;

    box-shadow: 1px 1px 2px #CCC inset;

}

.helperbloggersubmit {

    color: #666;

    font-weight: bold;

    text-decoration: none;

    padding: 6px 15px;

    border: 1px solid #D3D3D3;

    cursor: pointer;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    -goog-ms-border-radius: 4px;

    border-radius: 4px;

    background: #fbfbfb;

    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;

    #FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

#helperblogger-widget {

    -moz-border-radius: 10px 10px 10px 10px;

    -webkit-border-radius: 10px 10px 10px 10px;

    -goog-ms-border-radius: 10px 10px 10px 10px;

    border-radius: 10px;

    background: none repeat scroll 0 0 transparent;

    border: 1px solid #D3D3D3;

    padding: 8px;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -webkit-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

    width: 480px;

    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);

    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);

    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);

    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;

}

#helperblogger-widget:hover {

    background: none repeat scroll 0 0 #FFF;

    -moz-box-shadow: 1px 1px 2px #CCC inset;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;

    box-shadow: 1px 1px 2px #CCC inset;

}

#helperblogger-widget td {

    padding: 3px 0;

}

</style>

<center><br/><div id='helperblogger-widget'>

 <div id='emailwidget'>

  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>

  <tbody>

  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>

     Get free daily email updates!

    </p>

    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=RazHackingTricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

     <input name='uri' type='hidden' value='RazHackingTricks'/>

     <input name='loc' type='hidden' value='en_US'/>

     <input class='helperbloggerstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

     <input alt='' class='helperbloggersubmit' title='' type='submit' value='Submit'/>

    </form>

   </td>

   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>

     Follow us!

    </p>

    <a href='http://feeds.feedburner.com/RazHackingTricks' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://1.bp.blogspot.com/-MCuPoLmu9vs/T-1koEDzO6I/AAAAAAAACEU/01CNMKp86_k/s1600/helperblogger.com-rss.png'/></a>

    <a href='http://twitter.com/razblogs' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-7LTPdi6MD_w/T-1ko16lqtI/AAAAAAAACEg/6ayFWM4zSlM/s1600/helperblogger.com-twitter.png'/></a>

    <a href='http://www.facebook.com/razblogs' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-M8jY5Qg_58M/T-1kmmQ2Q-I/AAAAAAAACEA/m7eJvpsH09c/s1600/helperblogger.com-fb.png'/></a>

    <a href='https://plus.google.com/101599591590694433398/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-CnhgXrrD_8A/T-1knYqgPSI/AAAAAAAACEI/8SL6MLH5sZw/s1600/helperblogger.com-gplus.png'/></a>

   </td>

  </tr>

  </tbody>

  </table>

  <div align='right'>

   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.tipstricksisland.com/2013/05/email-subscription-widget-below-every-post.html' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>

  </div>

  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Frazlogs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">

  </iframe>

  <a class='twitter-follow-button' href='http://twitter.com/RazBlogs' rel='nofollow'></a>

  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

 </div>

</div>

</center>

</b:if>

Change Yellow Highlighted Text with your Links.

Check Video Tutorial


Now save your template and check any post inside your blog. Any kind of query or assistance you can ask by commenting in this post I will make it clear and Don’t forget to follow us.


Share this post

  • toms outlet store

    Hiya, I’m really glad I have found this information. Nowadays bloggers publish only about gossips and net and this is really frustrating. A good site with interesting content, that’s what I need. Thanks for keeping this web site, I’ll be visiting it. D…

  • mens nike air max 2015

    this guide is … what can I say? EXCELLENT!!!!