How To Add Floating Share Buttons To Blogger - DAVIES BLOG

All About Tech


Saturday, 7 October 2017

How To Add Floating Share Buttons To Blogger

Hi guys today am gonna be teaching you guys on How To Add Some Cool Floating Social Media Buttons to your Blogger Blog.

Many bloggers out there are looking for this code most especially to those who doesn't have social media buttons below their blog post, with this floating social media buttons it makes it easier for people to Like and Share your blog post, which is very easy to fish out on any Mobile phone or Desktop computer at any angle its been placed, just like the way my own is been placed at Bottom_Right of my blog.

Also Read: How To Easily Edit Your Blogger HTML Template On Android *Upadated*

So kindly follow this simple steps and finally add the floating share buttons to your blogger blog.

Go to your Blogger Dashboard»Layouts then add a new gadget any where u want either the Footer section, Header section or Sidebar section, just place it in anywhere comfortable, but i will be using the side bar section.
Kindly select the +Add A Gadget button at the top and add HTML/JAVA script to add this kindly select the + icon in front of it and successfully add it to your gadgets.

Then it will take u to another page where you will see a large box below a Title box

Just paste this code in the large box and save it

<!-- floating page sharers Start Share This With Friends-->
#pageshare {position:fixed; bottom:15%; right:10px; 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;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='' type="text/javascript"></script>
<div class='sbutton' id='gb'>
<div class="fb-like"data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
<div class='sbutton' id='gplusone'>
<g:plusone size="tall"></g:plusone>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//"></script>
</div><script> src=”″>
</script><div class=’button-share’ id=’digg’ style=’margin-left:3px;width:48px’>
<script src=’’ type=’text/javascript’></script>
<a class=”diggthisbutton diggmedium”></a>

if you have successfully added it to your blog then the share buttons will start to display.
Thanks guys please kindly do me a favour by selecting any social media button floating on your phone screen to share this post, or u can use the one below, and also scroll down to drop a comment and suggestions, for this post.

No comments:

Post a Comment