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.
Follow :
Facebook
Twitter
Google+
Like the post? Never miss another. Get all our posts directly to your e-mail. Subscribe to our newsteller today

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1) Do not include links in comments as they will not be published after moderation !
2) Make sure that you "subscribe by mail" to get notified to reply to your comments.
3) Please do not Spam... Spam comments will be deleted immediately upon our review.

Proudly powered by Blogger