Add "Do You Like This Article" Box Under Blogger Post

Adding any type of social sharing buttons, follow button and  follow by email box differently covers lot of space. Sometime we also feel difficulty while arranging them correctly to get more response from visitors side for more subscribe, shares and follows equally but if you feel that you are losing your visitors without getting better results in subscription list and also not getting any shares. Then here is solution of your problem.
Today i am going to introduce a beautiful and amazing social sharing box with follow buttons also. This "Do You Like This Article" box contains Email Subscription box which helps to increase your email readers with three icons of RSS, Twitter and Facebook. I also add "Add This" Widget in box which help to get more share. This combination make this box amazing and best widget for using it under every Post.

Steps To Add Box Under Every Blogger Post

Before Starting Must See a Demo of This Box from below given button and see how its Looks

Live Demo

If you like this box and want to add This widget then follow below given steps

• Go Blogger Dashboard >> Then Template Tab

• Now Click The Edit HTML

• Then search the code which something look like this 

<div class='post-footer-line post-footer-line-2'>

• This code may comes 2,3 times always choose which code at last place

• Then paste the Below given code just Below/After the code we search.

<b:if cond='data:blog.pageType == "item"'>
<style> 
form.emailform{ 
margin:20px 0 0; 
display:block; 
clear:both; 
} 
.sttext{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGcZ-bNrmA4KzT4seltEj3ABbHG4OiNR-Fxhrmx94NVFbeR4xIwuab4Awo5KsiURPp0ops7pR3GcEOs5Tw903njLtPrlUwv2mVSxDcg_9KePu45p0HQ4hLuUfCzY19vncyat5t1YSM7U/s28/box-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; 
} 
.STbutton{ 
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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 ); 
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
}
#Box-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; 
background:#EEEEEE;
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:555px; 
} 
#Box-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; 
} 
#Box-outer td{ 
padding:3px 0; 
} 
</style>
<div id='Box-outer'> 
<div id='Box'> 
<table width='100%'>
<span style='font-style: italic; font-size: 22px; font-family: arial,sans-serif, verdana;  color:orange;'>Do you Like this article? Spread our words!</span>
<br/><br/>If you enjoyed Our Post then Help us and share our post on social networks Or Must Join Us Our Latest Updates By Email and Social Networks. 
<tbody> 
<tr> 
<td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<br/>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
</tr>
<tr  align='left'>
<td> <p style='color:#666; font-style:italic; 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Safetricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='Safetricks'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='sttext' 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 alt='' class='STbutton' title='' type='submit' value='Submit'/> 
</form> 
</td>
<td>
<p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;'>Follow us!</p> 
<a href='http://feeds.feedburner.com/Safetricks' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jEa6tX9tnQZeKHGOuY7h89-ARW8be4QnQIlgI9tBtIM6hSLRAu-eDnRcbe1aZfVqMYpLtD1G_S5MvNB-44Ngtyaa2_9Z4EiBcmXz1UWeigwdV4ZFYedg5RBwxZMXu20axZFbmtKUL40/s40/box-rss.png'/></a>
<a href='http://twitter.com/Safetricks' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjEURS9_8upFou36iohwc5jCACDuAgT5s7FCbSrXrhaI9hhRikkNbGZltWcYonNHbt8ZcSS06SJnm7cljnVOIMeIGfbYbn09r8SqD4aVIIfqTqDLHcSwfnRjke_ThmyL4s5vvVC9RVdOg/s40/box-twt.png'/></a>
<a href='http://www.facebook.com/Safetricks' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6L69wPo5lx0JLSXjfbLkdJFgaGmaWSvij2hpaYKyoE9PeY3tsbDxRsgCjl19CdylEvruDtlUAgWlx3UaW6ECgMqacdUThyphenhyphenPxMWEqtGfmCtnn8S64LTOBwLKKisYwGUErhpw1gbfNdLnE/s40/box-fb.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

• Now replace usernames

Safetricks with your feed burner id which comes 2 times

SafeTricks with Facebook username

SafeTricks with Twitter username

• Replace them accurately with same color code as mention above.

• After Replacing these Username Save Your template.

I hope you like this sharing box under you blogger post. If you face problem while adding it to your blog then please leave your comment. I feel glad to help you. :)