How to Add Facebook Like Box Widget With Social Sharing Button below blog posts for blogger

Hi friendzz,Today i am going to tell you how to add a Fb like Box with Social button like Email Subscribe box,twitter and many more....

Adding CSS

1. Login to blogger >>go to Template >Edte HTML >>Proceed >> Expand Widget Templates
2. Now Find  ]]></b:skin>
3. and Just above it copy and paste Below code

#mdpost-likebox{display:block;min-height:250px}#post-likebox h2{font-size:30px;font-style:italic;font-variant:small-caps}#mdpost-likebox div.row{text-align:center;margin-bottom:10px}#mdpost-likebox img{display:inline-block}#mdpost-likebox .email{clear:none}#mdpostfblikebox{margin:10px 10px 0 0;text-align:left;float:left;overflow:hidden}.button,.emailbutton{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;padding:6px 12px;margin:0;-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.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none !important}.button:hover,.emailbutton: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}.widget-button{color:#AAA !important;display:block;font-size:18px;margin:30px auto;padding:8px 30px;text-align:center;text-shadow:1px 1px 0 #FFF;text-transform:uppercase;width:30%;font-weight:bold}.email{clear:none}.email{clear:both;width:50%;margin:10px 0}.emailform{position:relative;width:250px;background:#fff;margin:0 auto;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ddd}.searchinput,.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:none;background:none;font-family:georgia;font-style:italic;font-size:14px;color:#666}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:-1px;bottom:-1px;display:block;line-height:16px}.emailbutton{padding:8px !important}.emailinput{padding-right:70px !important;width:170px !important}.emailform, .emailinput { width: 98% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:auto; }

Adding HTML

1. Find   <div class='post-footer-line post-footer-line-1'/> If not found then find  <p class='post-footer-line post-footer-line-1'> and Paste below codejust above it

<b:if cond='data:blog.pageType == &quot;item&quot;'><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td width='50%'> <div id="mdpostfblikebox"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMYFACEBOOK&amp;width=300&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;appId=328967870473940" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300; height:255px;" allowTransparency="true"></iframe></div></td><td width='50%'><div id="mdpost-likebox"><h2>Do you Like this Article?</h2><div class="row"><div class="fb-like" data-href="https://www.facebook.com/MYFACEBOOK" data-send="true" data-width="450" data-show-faces="false"></div></div><div class="row"> <a href='http://feeds.feedburner.com/MYFEED' target='_blank' title='Suscribe to RSS feed'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRC83CdlrmnhOUrQ-BXjwZdjawPub1o_DogD2lKHxjhxeHV5N8t93VIYRD4403hjIQZ-D5msDJMTy6gcyKLEuo-NFxyw4E6Ef-eS9VyxP5Bwu3aXYCsX8YCMdDsgK71sGeqoEwv0iO4rx5/s1600/mdRSS.png' alt="rss"/></a> <a href='http://twitter.com/MYTWITTER' target='_blank' title='Follow me on Twitter'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoaDtuzXasL28j_x_8Tjo2KNSrn8Np0I1gX_-3BoWQMblM4_KTfv4gjm9GG1uXA5wmg3AP5o7tnaII3pIctej9aUZ-2LNDClg8vmeTEhXWRUuUfagaLwx4yiKHgfBRW39Z6JiGrO7G6Q-9/s1600/mdTwitter.png' alt="twitter"/></a> <a href='http://www.facebook.com/MYFACEBOOK' target='_blank' title='Became Fan on Facebook'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_lKqIP-HPFmUkAyS3SYX74R6E1OaXN6QvaDNuy_x2S5F7gnRzww9SS8FpAQktgHRI2SEllGwClMA9YJHwaPV04LkvBjo8yhyphenhyphenKXV6i7NlHPxpJSnLuhIY9PeEEsyrqKo1-pFiOV7zTaBr/s1600/mdFaceBook.png' alt="facebook"/></a></div><div class="row"><h6>Get Subscribe to Free Email Updates!!</h6></div><div class="row"><div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="MYFEED" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" 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;}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="SignUp" title=''/></form></div></div><div class="row"> <small>*Your email address will not be shared with anyone.</small></div></div></td></tr></table></b:if>

REPLACE - ALL "MYTWITTER" WITH YOUR TWITTER URL
REPLACE - ALL "MYFACEBOOK" WITH YOUR FACEBOOK URL
REPLACE - ALL "MYFEED" WITH YOUR FEED URL

Now all Done..,any problem then comment below...