Powered by Blogger.
Menu :

Add Email Subscription Form Below Post In Blogger

In this tutorial am going to share with you how to add an awesome subscription form below blog post. Subscription form is one of the major key of driving traffic to a blog. Because it helps in keeping your readers with up to date tutorials, i.e whenever you published a new posts, your readers would automatically be notified instantly, and this would definitely result in fetching you more and more traffic as long as you keep updating your blog with fresh posts. These's great! isn't it?

Add Subscription Form Bellow Posts.

In my earlier posts i shared a similar tutorials on adding a wordpress like subscription widget to a blogger blog sidebar. Perhaps you don't know how important is these subscription form, then you just have to give it a try and see how it works for you. As we all knows that getting a targeted audience is not that easy without hard working.

With this in mind, you have to try out different techniques to build a large audience around your blog. Introduce something catchy for your readers that would give them the reason of visiting your blog.

We created these nice subscription form because we know what our readers like. This subscription form is supported in all major browsers including IE9+.

    How To Add The Subscription Form Below Post?

    1.  Log in to your Blogger's Dashboard 
    2.  Click on Template => Edit HTML
    3.  Click anywhere inside the Template Editor and press Ctrl F, search for this code: <data:post.body/>
    4.  Now just below/after <data:post.body/> paste the following codes:


    <!--BlogStable.com Subscribe Form Below Posts-->
    <style type="text/css">
    #post-subscription {
    background-color: #DFF1FE;
    width: 100%;
    height: 140px;
    line-height: 1.5em;
    margin: 5px 0px 20px;
    border: 1px solid #00477D;
    }
    #post-subscription p {
    font-family: Gabriola, Aharoni, Times, "Times New Roman", serif;
    color:#000;
    font-size: 20px !important;
    font-weight: 900;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
    margin: 10px 0 -20px;
    padding: 0 5px;
    }
    #post-subscription form{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiU2ufT9BeNTtqDN85cZY6ByNwSKKZpiPyTNneDFr07BXJ8BpQ6dJ2Tdw71rDesKDNbrQ1hyphenhyphenPmea7kp5hv_oTddcLwHkvJsoR2F-yU_TWOmenBk9yC3boIW6HxoR-MTNqUaw450VyCBEz/s1600/subscription-arrow.png") no-repeat scroll 40px 0px transparent;
    }
    #post-subscription input {
    border: 1px solid #555;
    box-shadow: 0px 2px 2px #999;
    -moz-box-shadow: 0 2px 2px #999;
    -webkit-box-shadow: 0 2px 2px #999;
    }
    #post-subscription input.email {
    background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxqTzQads1Lr7FgKuNH0L5MUMdekvjlbRybAnZsRnYJmqctfkB1PJq4TwOvb77kMwzi6nNlhbfdMMqGE3gdfmj9SYznn7QXIPfofN7NySpky9-b1zOQEaPrUWCkvNc5QwLQ_W_uR3Iy3Q/s1600/subscribe-email.png) no-repeat
    center right;
    }
    #post-subscription input[type="text"] {
    font-size: 14px;
    margin-top: 10px;
    padding: 10px 28px 10px 5px;
    width: 230px;
    }
    #post-subscription input[type="submit"] {
    background: linear-gradient(to top,  #A61717,#FEC8C8);
    border: 1px solid rgba(0,0,0,0.4);
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 2px;
    text-decoration: none;
    text-shadow: 1px 2px 2px rgb(158, 23, 23);
    margin: -5px;
    }
    #post-subscription input[type="submit"]:hover {
    background: linear-gradient(to bottom,  #A61717,#FEC8C8);
    border: 1px solid rgba(0,0,0,0.4);
    }
    </style>
    <div id='post-subscription'>
    <center>
     <p>
    Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.
    </p>
    <br/>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?  uri=BlogStable&apos;, &apos;popupwindow&apos;,   &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
     <input name='uri' type='hidden' value='BlogStable'/>
    <input name='loc' type='hidden' value='en_US'/>
     <input class='email' name='from' onblur='if(this.value==&apos;&apos;)  this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)  this.value=&apos;&apos;;' type='text' value='Enter Your Email Here... '/>
    <input type='submit' value='Subscribe Now'/>
    </form>
    </center>
    <center>
    <a href='http://feeds.feedburner.com/BlogStable'>
    <img alt='' height='26' src='http://feeds.feedburner.com/~fc/BlogStable?bg=99CCFF&amp;fg=444444&amp;anim=1' style='background-color: inherit; border:0' width='88'/>
    </a>
    </center>
    </div>
    <!--BlogStable.com Subscribe Form Below Posts Ends-->
    5.  You have to make some changes on the codes. Change BlogStable to your feeburner address.
    6.  You also have to change your feed-count address, in other to keep records of your subscribers. Add your feed-counter address by changing BlogStable to your own feeds address.
    7. to customize the subscription form background color, simply change this code #DFF1FE; You can also use our Color Code Generator to select your favorite color.

    Feedback!

    If you have any difficulties adding these subscription form to your blog, kindly leave your query via comment. Also remember to share it to your friends on social networking sites like facebook and twitter.
    You don't want to miss any of our future updates? Do well to subscribe to our RSS feeds, so as to get our latest posts delivered directly to you email. Happy blogging pals.

    0 comments:

    Post a Comment