How to Add Subscription widget below every blog post

Subscription Box Below every blog post: We have recently teach you how to add Multi color subscription widget to blogger, and a lot of our visitors take benefit of it. But today we comes off with totally different stuff! Cool subscription widget below ever blog post, yeah. By adding this widget your blog readers will be able to see subscription widget below every blog post, and they can subscribe you through that widget, it should be noted that the widget today I am going to share is completely different from other widgets.

How to add subscription widget below every blog post

• First go to blogger dashboard.
• Click on the template tab.
• Click on the edit html tab there.
• Now search for the ]]></b:skin> tag.
• Now copy the below code and paste it above the ]]></b:skin> tag. 

#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;}

• If you do the above steps, then search for the  tag or  If you  find any of the tag, then copy the below script and paste it below the above any tag you find.

<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to Trikcspunch 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=trickspunch&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='trickspunch'/>
<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'/> <a target="_blank" href="www.trickspunch.blogspot.com"> Widget by Trickspunch </a></form>
</center>
</div>
</div>

Customization

• Now change the text in red to your desired text you want to display.
• Change the text in Green to your feeds URL.
• Thats it1
• Save your template
• If you have problems while adding this cool widget simply ask us we are here to help you up!