Thursday, January 20, 2022
HomeBlogAdd Floating Social Media Sharing Buttons To Blogger

Add Floating Social Media Sharing Buttons To Blogger

Today the social media becomes a great power to drive traffic to your blog. The most important thing after SEO of a blog is social media profiles on which you can share your content with your friends and public.

So, in this post we will learn How to add floating social media sharing buttons to bloggerBy which your visitors can share your content with their friends

Step#1: Go to your blogger dashboard and click on the template and in the template then click on Edit HTML.

Step#2: In the HTML Press ctrl+F and find the </head> tag in the search box.

Step#3: Just the above </head> tag paste the code below.

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

Step#4: Now find for ]]></b:skin> and just before it paste the following CSS code.

#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 modify the width of this widget then change the pink color according to your desire

Step#5:  Finally, just below the second <div class=’post-header’> (press CTRL + F and hit Enter twice to find the second one) add the following code.

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

If the bar overlaps the post content then change the 35px to higher value.

Step#6: Save the template and enjoy your content on social media.. I hope it will help you to drive great traffic from the social media.

MOHD AIYUB KHAN
Hello friends, I am AIYUB KHAN and I am Technical Auther & Co Founder of Akdoogle And if I talk about education, I am a Post Graduate Engineer. I love learning and researching new technology and telling and teaching others about them. If you continue to support me in this way, then I will continue to bring such new things to you. Such as Internet, Computer, Technology, Development, Seo Etc ... #We Are Experts!
RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Tech News

Latest Videos

Recent Comments

error: Content is protected !!