Destino Solutions

+91 9747866100

Floating Social Media sharing buttons to Blogger

September 6th, 2014

Floating Custom Social Media Sharing ButtonsSharing is helpful to get New unique traffic, BloggerPing sharing Floating Custom Social Media Sharing Buttons To Blogger (Blogspot Blog), Floating share buttons created with HTML and pure CSS. Nowadays Social sharing is a important thing, Floating share buttons are help to effective way increases Social share count, Because Floating share buttons widget is user friendly and always show on left side of blog.

Almost popular Blogs are using Floating Social Media Sharing Buttons and it is most useful widget for blogger blogs.

Follow The Steps

1. Go to Blogger > Template > Layout > Add widget HTML/JavaScript.

2. Add following code inside the HTML/JavaScript, And Save

<style type=”text/css”>.left-share {position: fixed;margin-left: -743px;float: left;background-color: rgba(255, 255, 255, 1);z-index: 20;bottom: 40%;border-radius: 5px 0px 0px 5px;padding: 5px;border: 1px solid rgba(113, 113, 113, 1);}.g-plusone, #fb-root {display: inherit;padding: 5px 3px 0px 8px;}.twitter-share-button {padding-top: 5px;display: inherit;}</style><div class=’left-share’><script src=”https://apis.google.com/js/platform.js” async defer></script><div class=”g-plusone” data-size=”tall”></div><div id=”fb-root”></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1455463981332494&version=v2.0”;  fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));</script><div class=”fb-like” data-href=”#” data-layout=”box_count” data-action=”like” data-show-faces=”false” data-share=”false”></div><a href=”https://twitter.com/share” class=”twitter-share-button” rel=”canonical” data-via=”your_screen_name” data-lang=”en” data-related=”anywhereTheJavascriptAPI” data-count=”vertical”>Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script></div>

Settings for Adjust widget  Positions. margin-left: -743px; bottom: 40%;

For adding more Social media buttons, Final </div> Just above paste your code.

You are looking to more fancy floating widget, if you better to add some Jquary floating effects like
Floating Effect. You have any trouble? feel free mention it below comment box.

Categories: BloggerBlogger Widget