Showing posts with label Subscription Box. Show all posts
Showing posts with label Subscription Box. Show all posts

Add Beautiful Email Subscription Widget Below Post For Blogger

Today in this post I am giving you a Email Subscription Form to add below every blog posts. By adding this Email Subscription Form you can boost you Feed burner readers. So are you ready to Add this ? So let’s get started. Below is the Screen shot of the Email Subscription Form on how it looks.
Email Subscription widget

How to add subscribe us widget below post blogger

  • Login to your Blogger Dashboard.
  • Go to Template –> Edit HTML.
  • Find the below code on your blogger template
]]></b:skin>
  • Add this CSS before the searched code ]]></b:skin>
#emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}
  • Now we have completed adding styles of the Gadget.
  • Now we need to add the position of this widget according to your need. You can add this Email Subscription widget any where but here we will be adding at the bottom of your blog posts because readers after reading your posts they might subscribe for your future posts also.
  • Find the below code using Ctrl + F.
<div class='post-footer-line post-footer-line-3'>
  • Immediately after the code add the below code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggingTechniques&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='MyBloggingTechniques'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscription.</small></p></form></div></b:if>
  • The text in Red colour ( MyBloggingTechniques ) should be replaced by your Feed burner Name.

Add Simple Subscription Box to Blogger

Every bloggers dream is that his blog should be popular in the internet and earn some penny of it. Everyone is not successful with this concept because Do you know why ? One of the main reasons is placement of subscription box.
Subscription Box
View Demo Button

How to Add Subscription Box Under Every Post


  • Login to Blogger Dashboard
  • Click on Template –> Edit HTML –> Proceed --> Check Expand Widget Templates
  • Place below code right after <head> tag.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
  • Now find (Using Ctrl + F)
<data:post.body/>
  • And paste the below code right below <data:post.body/>
<style>
#Subscribe-boxRBT {
    border: 1px solid rgba(221, 221, 221, 0.43);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 30px #EEEEEE inset;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
}
#Subscribe-boxRBT h1 {
    color: #000000;
    font-family: &#39;Open Sans Condensed&#39;,sans-serif;
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 0;
}
#Subscribe-boxRBT input {
    border: medium none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #C2C2C2 inset;
    color: #666666;
    font-family: georgia;
    font-size: 14px;
    margin-bottom: 5px;
    padding: 10px;
    text-shadow: 1px 1px 0 #FFFFFF;
    width: 280px;
}
#Subscribe-boxRBT .submit {
    background: none repeat scroll 0 0 #B12D2D;
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 2px #B6B6B6;
    color: #FFFFFF;
    cursor: pointer;
    font-family: georgia;
    font-weight: bold;
    margin: 0 auto;
    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.4);
}
#Subscribe-boxRBT .submit:hover {
    color: #FFFFFF;
    opacity: 0.8;
}
#Subscribe-boxRBT .submit:active {
    background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent;
}
    </style>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='Subscribe-boxRBT'><h1>Did You Enjoy this Article ?</h1>
<p>If yes, Then enter your email below to get </p>
<p>more such great articles in your inbox</p>
<p>For FREE !</p><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtechniques&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Best Email&quot;;}' onfocus='if (this.value == &quot;Enter Your Best Email&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Best Email'/> <input name='uri' type='hidden' value='mybloggingtechniques'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div></b:if>
  • If you want to change the heading just change this “Did You Enjoy this Article ?” to the choice of yours. Here in our Demo page i have changed it to “Do you like this Article ?”.
  • Change my feed name “mybloggingtechniques” with yours.
  • Save your Template.
Proudly powered by Blogger