Thursday, August 17, 2017
728x90 V3

Add floating social media sharing buttons below Blogger post titles

It is very important to have social media sharing buttons, you need traffic on your site/blog and with this sharing buttons you’ll get it quick. If you have nice posts and something interesting to read your visitors will like to share that and help your site/blog. In SEO optimization social media status is important too, so why not install this floating social media sharing buttons?

In this tutorial we’ll show you how to add floating social media sharing buttons below the Blogger post a title, it’s very easy, you just need to follow us step by step and you’ll increase your sites sharing on social media platforms. This is the floating bar with buttons, that means that when the reader scrolls down he will still see buttons without the need to scroll back. Adding the below jQuery script will make social buttons float in a fixed position as soon as they rich the top of the post/page. Social media sharing bar includes Facebook, Twitter, Google+ and Pinterest sharing method.

Edit HTML

First you need to go to your Blogger Dashboard and go to Template and click Edit HTML like in the picture below.

tut 1

 

Find </head>

Now when you’re in HTML document of the site just click anywhere in the document and hit CTRL+F.In the search box type tag </head> and hit ENTER.

tut 2

 

First code

Now right above the </head> line add this code:

<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’ : ‘550px‘, ‘top’ : ‘0px’});
} else {
$movesbuttons.css({‘position’ : ‘absolute’, ‘top’ : ‘auto’});
}
});
});
//]]>

</script>

Second code

Now before the ]]></b:skin> add the following code(CSS style)

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

 

If you want to change the width of the floating bar just replace 550px ( red text from both codes above ) with amount of px you want… Change the both codes!

Third code

This last code/script you need to add just below the second <div class=’post-header’> (press CTRL+F type <div class=’post-header’> and hit enter twice to find the second one)

<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’>

<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>

</ul>
</div>
</div>
</b:if>

Customization

You can customize this script whoever you want, if you want social media sharing buttons to show at the end of the post you need to put the third code right under the <div class=’post-footer’> line. If the bar overlaps with content just change 35px whoever you want.

Save

Now just save your new file and enjoy in your new social media sharing buttons, i hope that this tutorial helped you!

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

Add a CSS Animated Share Button on Blogger

Social Medias are very important for SEO so it’s better for you to have a ...

Leave a Reply

Your email address will not be published. Required fields are marked *