Add Subscription Box with Social Icons Below Blog Post

Today i am going to share a simple and effective subscription box with social icons. This widgets is simple one and has no effects on site/blog loading time. This should be use below blogger post so that we ever any reader comes to your blog and reads a post, he/she should have an option to subscribe to your posts easily.  It will help you to get more subscribers. So lets get it.

Recommended: Collection of Stylish Subscription Widgets for Blogger

 How to Add ??

• Go to your blogger account and login.
• Move to Template and click on Edit Template (make a backup of template)
• Now search for following code (you may found this code more than once normally 3 to 4 times, so repeat for each till you get the working one)

<data:post.body/>

•  Now copy and paste following code below the above code.

<style>  form.emailform{  margin:20px;  display:block;  clear:both;  }  .bttext{  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbvnWnFyJYjjq1M5c4qDE-bkaaY0ttUNBeYA0xFnDdU5Bz9zhOKWghCaHtkOXYkhPjSk9Vg7oTYZ-A2O0RCzppGqiJKEPi_TAp8rMdgOk7teBxDSlYEEzVUgJ2OlT8czzaBhfxg9yRYBv/s28/w2b-mail.png) no-repeat scroll 4px center transparent;  padding:7px 15px 7px 35px;  color:#666;  font-weight:bold;  text-decoration:none;  border:1px solid #D3D3D3;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  border-radius: 4px;  -moz-box-shadow: 1px 1px 2px #CCC inset;  -webkit-box-shadow: 1px 1px 2px #CCC inset;  box-shadow: 1px 1px 2px #CCC inset;  }  .btbutton{  color:#666;  font-weight:bold;  text-decoration:none;  padding:6px 15px;  border:1px solid #D3D3D3;  cursor: pointer;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  -goog-ms-border-radius: 4px;  border-radius: 4px;  background: #fbfbfb;  background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));  background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);  background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);  background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );  background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);  } #doulike-outer {  -moz-border-radius: 10px 10px 10px 10px;  -webkit-border-radius: 10px 10px 10px 10px;  -goog-ms-border-radius: 10px 10px 10px 10px;  border-radius: 10px;  box-shadow: 5px 5px 5px #CCCCCC; background: none repeat scroll 0 0 transparent;  border: 1px solid #D3D3D3;  padding:10px; margin-top:10px;  -moz-transition: all 0.3s ease-out;  -o-transition: all 0.3s ease-out;  -webkit-transition: all 0.3s ease-out;  -ms-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;  width:520px;  }  #doulike-outer:hover{  background: none repeat scroll 0 0 #FFF;  -moz-box-shadow: 1px 1px 2px #CCC inset;  -webkit-box-shadow: 1px 1px 2px #CCC inset;  }  #doulike-outer td{  padding:3px 0;  }  </style>  <b:if cond='data:blog.pageType == "item"'>  <div id="doulike-outer"> <div id="doulike"> <span style="font-style: italic; font-size: 30px; font-family: Droid Serif, serif; verdana;  color:#008E00;">Do you Like this Article?</span><table width="100%"> <tbody> <tr> <td align='left'> <p style='color:#666; font-family: Droid Serif, serif; verdana;  margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p> <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='mybloggingtips'/> <input name='loc' type='hidden' value='en_US'/> <input class='bttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/> <input alt='' class='btbutton' title='' type='submit' value='Submit'/> </form> </td> <td><p style='color:#666; margin:0px 0px 5px 0px;  '>Follow us!</p> <a href='http://feeds.feedburner.com/mybloggingtips' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquDQQ8WXDXjZTp_j5RvNgmJVRQ9aH1IMyMb354HzW1tomvRyp1Yvns3aiypWLZNt5MaEsfSdRhY9XsdjXNDJQE4k739VSvKtpvXU7yJ72XDlY9dG7K3c8VfmVuf6vzPup8YKY9yS8POg0/s40/w2bRSS+.png'/></a> <a href='http://twitter.com/mybloggingtips1' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwxQ2yb8zWXEb1HTfy8bZzQK8RNVdXee63vhWULKmEBTyXTPHYgvBcJIQMxkF0MtNg0_C3fJWNx3WrV2QbjsKIa4pXWErushymawma7hMr_b1cp5r85U2WLjiKJKRC_fGc9Yb40ZYrGnb/s40/w2bTwitter.png'/></a> <a href='https://www.facebook.com/blogsmasala' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0yBoTPDHQ9gQpyNoggSSoumqpNgH_BoWEfCpjw8luTpjkiYkuty3mifLt_FjMIPZ6ElzTP6uYzKPApowvlLF_EQE7MCEzsEiJ-JmjP4EY2Pcsi9XeUAHon41H84AzI22cxTxhVXnDzEP/s40/w2bFaceBook.png'/></a> </td> </tr> </tbody></table></div></div> </b:if>

•  Now replace the Blue color text with your feed, facebook and twitter names/links
• Save your templates and you are done.

 You Like It ?

If it helped you a little then please like and share it with your friends.