Add Floating Social Media Sharing Buttons Below Blogger Postal Service Titles
Sunday, February 9, 2020
Edit
It is becoming increasingly of import to brand our posts appreciated as well as shared on social networks as well as 1 of the best ways to larn traffic to our spider web log or site as well as boost sharing stats is to add together social sharing buttons.
In this tutorial nosotros volition come across how to add together a floating social media sharing bar below the championship of Blogger posts, thus when a reader scrolls downward the page, he volition nevertheless endure able to come across the sharing buttons without having to scroll dorsum to the top.
Adding the below jQuery script volition brand the buttons float inwards a fixed seat every bit presently every bit they arrive at "the top" of the page. By scrolling back, the buttons volition furnish to their initial position.
The social sharing bar includes buttons for Facebook, Twitter, Google+, as well as Pinterest.
Step 2. Click anywhere within the code expanse as well as press the CTRL + F keys to opened upwardly the search box. Once you lot come across the search box, type the </head> tag within the search box as well as striking Enter to uncovering it.
Step 3. Just inwards a higher house </head> add together this script:
Step 5. Finally, simply below the bit <div class='post-header'> (press CTRL + F as well as striking Enter twice to uncovering the bit one) add together the next code:
If the bar overlaps alongside the post content, thus alter 35px to a higher value.
Step 6. Click on the "Save template" push clitoris as well as you're done!
So these were the steps for adding the horizontal social buttons bar on Blogger. Using this bar it is likewise useful every bit it could assistance you lot to larn to a greater extent than social traffic for your blog.
In this tutorial nosotros volition come across how to add together a floating social media sharing bar below the championship of Blogger posts, thus when a reader scrolls downward the page, he volition nevertheless endure able to come across the sharing buttons without having to scroll dorsum to the top.
Adding the below jQuery script volition brand the buttons float inwards a fixed seat every bit presently every bit they arrive at "the top" of the page. By scrolling back, the buttons volition furnish to their initial position.
The social sharing bar includes buttons for Facebook, Twitter, Google+, as well as Pinterest.
Social Media Sharing Buttons below Blogger Post Title
Step 1. From the Blogger Dashboard, become to "Template" as well as click on the "Edit HTML" button:Step 2. Click anywhere within the code expanse as well as press the CTRL + F keys to opened upwardly the search box. Once you lot come across the search box, type the </head> tag within the search box as well as striking Enter to uncovering it.
Step 3. Just inwards a higher house </head> add together this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Step 4. Now earlier the ]]></b:skin> tag (press CTRL + F to uncovering it) add together the next CSS styles:
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
commencement = $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>
#floating-social-buttons {To alter the width of the bar, modify the 550px values inwards red. Note that this value likewise appears inwards the script which likewise needs to endure modified.
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px company #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;
}
Step 5. Finally, simply below the bit <div class='post-header'> (press CTRL + F as well as striking Enter twice to uncovering the bit one) add together the next code:
<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + 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>
Customizing the Floating Social Media Sharing buttons
If you lot desire the buttons to seem at the cease of the post, glue this code earlier or later on <div class='post-footer'>If the bar overlaps alongside the post content, thus alter 35px to a higher value.
Step 6. Click on the "Save template" push clitoris as well as you're done!
So these were the steps for adding the horizontal social buttons bar on Blogger. Using this bar it is likewise useful every bit it could assistance you lot to larn to a greater extent than social traffic for your blog.