How To Apply Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the blogs, and it also increase the number of times your posts get shared on Facebook, Twitter, Google + and other social networks. This widget includes: Facebook like,Twitter share, Google +, Digg, StumbleUpon and RSS Feed button with a live counter.


1- Log in into your Blogger Account  >>  Select Layout  >>  Add Gadget
2- Select HTML/JavaScript
3- Now copy the following code then paste it in the HTML/JavaScript box
<!-- floating share bar Start --> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from sharetoworld.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='ShareToWorld' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/sharetoworld' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpkiXMpryP_tFFj-dH8uXDS1-Yipsb9vRuWSsQ2x2j0tALQVcFu27saYVL-PrKXEkBMLPBMrCZsCltdOiBr0MESF-dGNAbVSNV9H44jj7ij9oaJMdwjizDlqur7HqVsgpvqImWeyBm_uZ/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://blogolect.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>
Note:
- Replace ShareToWorld with your Twitter Username
- Replace http://feeds.feedburner.com/sharetoworld with your RSS Feed URL.

4- Press Save button

Enjoy !

Post a Comment

أحدث أقدم