Having a "Floating Social Media Sharing Buttons" is a very widely used type of widget on all outstanding blogs/websites for it increases the number of times your posts being shared on social networking sites such as Twitter, Facebook and many others . Furthermore, it has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed , each of them has comes with a live counter.
How To Add Floating Social Media Buttons To Blogger
Follow the steps below:
Step 1. Go to Blogger Dashboard >> Click Layout >> Add A Gadget link.
Wait until the pop-up window will appear.
Step 2. From the pop-up window, scroll down and select HTML/Javascript
Step 3. Copy the code below and place it inside the empty box.
<!-- floating share bar Start bloggingtipsandtrix.blogspot.com--> <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 Helpblogger.com">Step 4. Save the gadget.
<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='Bloggingtipsandtrix' 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/Bloggingtipsandtrix' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wPdlZ-Tnqtimvf_MvkH6RPwR8xFNgtRSdkfECY12-Krk-aiTBXYUeoUG_6_V0mPGQP9TLnnV7DhA8PXHh7_pxvDRg3YhaY7IHDDxVsZXJrDnzVTdOABeh0wY2ud3vtSWTi775ixcqv4P/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://bloggingtipsandtrix.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>
Customization:
Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
Twitter setting - Replace BloggingtipsandTrix (in red color) with your Twitter username.
Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class='sbutton'> BUTTON CODE HERE </div>
RSS Feed - Change the text in green with the url address of your RSS feed.
Click here for another version of floating social media buttons
Enjoy :-)
Credits goes to Helplogger with some modification from me.
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV