Add Simple And Awesome Subscription Box below your post

Today we are going to make a high quality RSS subscription box with no images. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!..

Live Preview

How to add Subscription Box Below Your Blog Post

1. The First thing you need to do is to login into your Blogger account and go to >> Template >> Edit HTML and search for the ending ]]></b:skin>tag and just above it paste the following code.

#subscriptionwrap {
    float: left;
    width: 600px;
    background: #e9e9e9;
    padding: 15px;
    border: 1px solid #ddd;
   -webkit-border-radius:4px;     -moz-border-radius:4px;     border-radius:4px;
    -webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);     -moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);     box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
 
}
.subscriptionbox h4 {
    font-size: 38px;
    font-family: 'Verdana', Arial;
   font-variant: small-caps;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
    color: #333;
    font-weight: 600;
    text-shadow:1px 1px 5px #333;
text-decoration: none !important;
}
.subscriptionbox p {
    font-family: geogia;
    font-style: italic;
    font-size: 26px;
    text-align: center;
    margin: 0px;
    line-height: 30px;
    margin-top: 25px;
    border-bottom: 1px solid #333;
    color: #454545;
    padding-bottom: 20px;
}
.emailbutton1 {    background:#f7f8f9;     background:-webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);     background:-moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);     background:-o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);     background:-ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);     background:linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );     border:1px solid #ddd;     -webkit-border-radius:4px;     -moz-border-radius:4px;     border-radius:4px;          margin:0 auto; margin-left: -10px;    -webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);     -moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);     box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);     color:#888 !important;     text-shadow:0 1px 0 #fff;     line-height:1.1; top: -1px;     cursor:pointer; padding:22px 15px 19px 15px !important;     font-size:14px;     font-weight:bold;     text-decoration:none !important;}
.emailbutton1:hover, .formbutton:hover{    background:#f1f1f1;     background:-webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);     background:-moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);     background:-o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);     background:-ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);     background:linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );     text-decoration:none !important;}
.emailinput1{    height:40px;     margin:10px 0 0 0px;     padding:8px 40px 8px 10px;     border: 1px solid #d2d2d2;     background:#fff;     font-family:georgia;     font-style:italic;     font-size:16px;     color:#949494; -webkit-border-radius:4px;     -moz-border-radius:4px;     border-radius:4px;}
.emailinput1{    padding-right:30px !important;     width:450px !important;}

Note:-  if you want to change the width of subscription box. Just change  the following value in above code “width: 600px; to any other value like 640px, 700px, 760px….!!!!!

2. In the template, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer-line post-footer-line-1'>.

<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p><center>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' 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 class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</center>
</div>
</div>

3. Now you need to make these changes in html code.

• Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>

4. Save your template and you are all set!

You have successfully learned how to display related Articles below posts in blogger. Go and preview your posts to see everything is working in an order or not. Visit your blogs to see the new eye-catching change. I am sure this will greatly increase the number of your blog subscribers and don’t forget to subscribe our blog RSS Feed to get new tips & tricks. Thanks for reading our post.