How to Add 'Do You Like This Story' Social Subscribe Widget on Blogger

Hello guys I'm back with another beautiful social subscribe widget for blogger platform. You must have seen this widget on many blogs, It is called 'Do you like this story' widget and most of the time is place at the bottom of the blog post. Today I'll show you How to Add 'Do You Like This Story' Widget on your blogger blog.

Live Demo

Features of 'Do You Like This Story' Widget

• Facebook Like & Send button
• Email Subscription form
• Social buttons; Twitter, Facebook, RSS

This widget includes all major social media buttons and an Email subscription form. This is perfect for placing at the bottom of blog posts.

How to Add this widget under Blogger Posts

• Log in to Blogger 
• Go to Template > Edit HTML
• Tick 'Expand widget templates'

Please Backup your template before making any changes to it.

• Search for <data:post.body/>
• Paste the following code just below <data:post.body/>

&lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;
 &lt;style&gt;
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5A2vhS5hQL6zI_epxZO3odBuwJrVC5XAoWmcVcKZk2jMdDcsg50eMjO_3e49C1BSo1WXbB6I7S3dqG-Wvq3FKkMGvWx5QMcShpY1W766bJxa5lI0dcHO18ksrPgTFDMSWPtYoNfpms5U/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;
}
.TOBTButton{
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=&amp;#39;#FBFBFB&amp;#39;, endColorstr=&amp;#39;#F4F4F4&amp;#39;,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;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-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:480px;
}
#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;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
&lt;/style&gt;

 &lt;div id=&#039;doulike-outer&#039;&gt;
&lt;div id=&#039;doulike&#039;&gt;
&lt;table width=&#039;100%&#039;&gt;
&lt;tbody&gt;
&lt;span style=&#039;font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;&#039;&gt;Do you Like this story..?&lt;/span&gt;
&lt;tr&gt;
&lt;td&gt;
 &lt;div id=&#039;fb-root&#039;/&gt;&lt;script src=&#039;http://connect.facebook.net/en_US/all.js#xfbml=1&#039;/&gt;&lt;fb:like font=&#039;&#039; href=&#039;&#039; layout=&#039;button_count&#039; send=&#039;true&#039; show_faces=&#039;false&#039; width=&#039;300&#039;/&gt;
 &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td align=&#039;left&#039;&gt; &lt;p style=&#039;color:#666; font-style:italic; margin:0px 0px 5px 0px; &#039;&gt;Get Free Email Updates Daily!&lt;/p&gt;
&lt;form action=&#039;http://feedburner.google.com/fb/a/mailverify&#039; class=&#039;emailform&#039; method=&#039;post&#039; onsubmit=&#039;window.open(&amp;apos;http://feedburner.google.com/fb/a/mailverify?uri=Feedburner Username&amp;apos;, &amp;apos;popupwindow&amp;apos;, &amp;apos;scrollbars=yes,width=550,height=520&amp;apos;);return true&#039; style=&#039;margin: 0pt;&#039; target=&#039;popupwindow&#039;&gt;
&lt;input name=&#039;uri&#039; type=&#039;hidden&#039; value=&#039;Feedburner Username&#039;/&gt;
&lt;input name=&#039;loc&#039; type=&#039;hidden&#039; value=&#039;en_US&#039;/&gt;
&lt;input class=&#039;mbttext&#039; name=&#039;email&#039; onblur=&#039;if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Enter your email...&amp;quot;;}&#039; onfocus=&#039;if (this.value == &amp;quot;Enter your email...&amp;quot;) {this.value = &amp;quot;&amp;quot;}&#039; type=&#039;text&#039; value=&#039;Enter your email...&#039;/&gt;
&lt;input alt=&#039;&#039; class=&#039;TOBTButton&#039; title=&#039;&#039; type=&#039;submit&#039; value=&#039;Submit&#039;/&gt;
&lt;/form&gt;
&lt;/td&gt;
&lt;td&gt;&lt;p style=&#039;color:#666; font-style:italic; margin:0px 0px 5px 0px;  &#039;&gt;Follow us!&lt;/p&gt;
&lt;a href=&#039;http://feeds.feedburner.com/Feedburner Username&#039; rel=&#039;nofollow&#039; target=&#039;_blank&#039; title=&#039;Suscribe to RSS Feed&#039;&gt;&lt;img src=&#039;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTZXxxsbgxsThPLjSbOyprJNPOAnsKgqDF9XFzISat6vYaQaa4bKKIfC7KFJPjdvPfVw22DFOj9x_guaKCMId4HNLYjQrYKUKSw6j-BCnfUwGlurUCfzse92yoIBgpMI82gmuPuJRJxnk/s40/w2bRSS+.png&#039;/&gt;&lt;/a&gt;
&lt;a href=&#039;http://twitter.com/jimmieluthra&#039; rel=&#039;nofollow&#039; target=&#039;_blank&#039; title=&#039;Follow us on Twitter&#039;&gt;&lt;img src=&#039;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hOW2WBsMGQn76Adq3JTjq-QI79Y9yy6PXtQLdEXwLpIKKROaE-7iBTQTgYI19CJaUSzub_AIMIwCHVPQLFGGUQ92JwDbomPteFZJo-Hb7BAcOvNpQ9xTOyHuDqW-kTlrAQ_yesGLXsfi/s40/w2bTwitter.png&#039;/&gt;&lt;/a&gt;
&lt;a href=&#039;http://www.facebook.com/FBUsername&#039; rel=&#039;nofollow&#039; target=&#039;_blank&#039; title=&#039;Follow us on Facebook&#039;&gt;&lt;img src=&#039;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdW5lt6lKFYUYaJw3wj1e_389JAueMM2pd6Hy2F1IDqYgkTGB0KOE-BqZBW8wMGuB_-dGHKB8jqpwKRdkiy9IvDZQZLgYw28Cr59KRZnaScnZF4b9pUZKC3YAe1s3mvY_0j_EWxDlpuCP/s40/w2bFaceBook.png&#039;/&gt;&lt;/a&gt;
&lt;/td&gt; &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/b:if&gt;

• Make the following changes.

Replace Feedburner Username with your Feedburner Username
Replace Jimmieluthra with your Twitter Username
Replace FBUsername with your Facebook Fan page Username   

• Save Template

Now 'Do you like this story' widget will appear under all your blog posts. If you like this widget then share and comment.