Wednesday, 3 December 2014

Add Facebook Like Box Widget With Social Sharing below each Post

Add Facebook Like Box Widget With Social Sharing below each Post

How to Add Facebook Like Box Widget With Social Sharing below each Post ?
Now 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 in a very easy way .


Demo

.........................................................................................................................................
ADD SOCIAL WIDGET BELOW EACH AND EVERY POST.........................................................................................................................................

.........................................................................................................................................
Adding CSS   - (1/2)
.........................................................................................................................................


  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   - (2/2)
    .........................................................................................................................................
    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 code just 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='http://2.bp.blogspot.com/-s_Fv5ETYruQ/UFG9DeJv86I/AAAAAAAADkY/S4TKJ2xfGes/s1600/mdRSS.png' alt="rss"/></a> <a href='http://twitter.com/MYTWITTER' target='_blank' title='Follow me on Twitter'><img class="middle" src='http://2.bp.blogspot.com/-GRwSCqlR-Ms/UFG9Sk9JpZI/AAAAAAAADkg/5u9Wm3SGH9Q/s1600/mdTwitter.png' alt="twitter"/></a> <a href='http://www.facebook.com/MYFACEBOOK' target='_blank' title='Became Fan on Facebook'><img class="middle" src='http://1.bp.blogspot.com/-kkIoLCzsxZc/UFG8PpbWzHI/AAAAAAAADkA/5LFi-PR1F4o/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 you can Save your Template ..,if any question or problem them comment below
    Previous Post
    Next Post

    post written by: