Floating Social Sharing Bar For Blogger

Social sharing is a good way to drive traffic to a blog or website therefore social buttons are used in blogs and websites to get shares, tweets, pins and so on to spread blog or webpages. Blogger has built-in share buttons below each post, but now a days people use to add floating buttons in blogs because its trending and is helpful to share posts easily and quickly. Floating buttons are in both vertical and horizontal styles but the most popular one is vertical style, so people usually use vertical floating share buttons in blogs but horizontal floating buttons are also used to help visitors share posts without scrolling to the end of the post as share buttons float with scrolling page as the visitor scrolls.
I have shared smooth vertical flaoting share buttons gadget before and in this post I am sharing Floating social sharing bar. You can see a demo in below image, hope you like it:

To add this gadget below post title in every post of your blog follow below steps:

Step 1: Go to blogger dashboard and choose the blog in which you want to add this gadget.

Step 2: Select template in the menu on left side and click on Edit Html.

Step 3: Click anywhere inside the code box and search for </head> by using Ctrl+F on your keyboard. 

Step 4: Copy the below code and paste it just below </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(function() {

var $movesbuttons = $("#floating-social-buttons"),

$window = $(window),

offset = $movesbuttons.offset();

$window.scroll(function() {

if ($window.scrollTop() > offset.top) {

$movesbuttons.css({'position' : 'fixed', 'width' : '625px', 'top' : '0px'});

} else {

$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});

}

});

});

//]]>

</script>

Step 5: Search for ]]></b:skin> by using Ctrl+F on your keyboard and just above it paste the below code:

#floating-social-buttons {

padding: 6px 0px 12px;

position: absolute;

background: #F6F6F6;

border-bottom: 1px solid #DEDEDE;

width: 625px;

height: 18px;

z-index: 10;

}

.floating-social-buttons {

margin-left: 5px !important; 

}

.floating-social-buttons li {

float: left;

margin-left: 5px;

list-style:none;

}

Step 6: Now search for <div class='post-header'>, make sure to search 2 times and paste the below code below the second <div class='post-header'>:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:5px 0 35px 0;clear:both;'>

<div id='floating-social-buttons'>

<ul class='floating-social-buttons' style='     position: absolute;     left: 135px; '>

<p style='     position: absolute;     top: -13px;     left: -132px; font-size: 16px;'>SHARING IS CARING:</p>

<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

<li style='     margin-left: 20px; '><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>

<script data-counter='right' type='IN/Share'/></li>

</ul>

</div>

</div>

</b:if>

Step 7: Click on save template and you are done successfully.

Customization: 

• If you wish to change width of the bar increase or decrease number in pieces of codes highlighted in step 4 and step 5.
• If you want to change title(SHARING IS CARING:) Replace it with desired title is code used in step 6.

Make sure to change width in both pieces of codes used in step 4 and 5 otherwise with will remain same.

If you have any question related to this post or this gadget is not working is your blog ask me in comments. Follow and subscribe to get latest updates about blogger gadgets, tips, tricks, menus, tutorials, seo etc. Share this post with others and help me spread 101Helper.

Search tags: Add social media buttons below titles in blogger, Social buttons for blogger, floating social buttons, horizontal share buttons, share bar for blogger, Floating social sharing bar for blogger, how to add floating buttons in blogger, 101Helper gadgets for blogger.

Tweet