MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

This Tutorial Related Social Media Shearing Widgets For FaceBook like Box Floating.Add facebook like box to blogger, how do I make it?. Do you know facebook and twitter now becomes biggest social media and many people in the world use it.its A Best Source For increase Your Blogger And Blog Site  traffic Increase.So i Hope you Will Enjoy this.Amazing Css Style .






Join Me On Facebook

• https://www.facebook.com/groups/imtiazblogtrick
• https://www.facebook.com/ImtiazBloggerTrick

Add Floating Facebook Like Box

1. Go to Blogger > Layout > Add a gadget
2. And select HTML/JavaScript
3. Add this code into it

<style>
#thiswidget {
   height: 20px;
   width: 56px;
   border-radius: 0 0 5px 5px;
   float: left;
   padding: 0 0 0 12px;
   background-color: #D0D0D0;
}
#boxshare {
   display: scroll;
   position:fixed;
   bottom:40%;
   left:2%;
   width: 68px;
   background-color:#FFFFFF;
   border: 1px solid #A3A3A3;
   border-radius:5px;
   padding:0 0 2px 0;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   z-index:10;
}
#boxshare .boxbutton {
   float:left;
   clear:both;
   margin:5px;
}
.fb_share_count_top {
   width:68px !important;
}
.fb_share_count_top, .fb_share_count_inner {
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
.FBConnectButton_Small .FBConnectButton_Text {
   padding:2px 2px 3px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   font-size:8px;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
   width:68px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
</style>
<div id='boxshare' title="Share This">
<div class='boxbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='boxbutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div>
<div class='boxbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="imtiazblogtrick">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class='boxbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='boxbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align: center;">
</div>
<a href='http://www.matrixar.com/2013/03/how-to-add-floating-facebook-like-box.html' id='thiswidget'>widget</a>
</div>

Now Replace highlight with your user name of the twitter without @
4. Finally click Save it.

You can make facebook like box on right & Left your page with replace Aqua highlight from left to right. And you can adjust the distance replace 40% with the distance you want.