Floating Social Sharing Buttons Below Blogger Post Title

Social sharing widgets below post title for blogger is very popular in search results, it becomes trendy in this competition and fish ma...

Floating social sharing buttons below blogger post title
Social sharing widgets below post title for blogger is very popular in search results, it becomes trendy in this competition and fish market era everyone wants to get thousands of visitors for better earning and for online reputation. Social Sharing plays a very vital role in the blogosphere, in busy time it will help you in covered traffic bounce rate and it also maintains your Alexa ranking which keeps importance for your advertiser.

The widget that am sharing with you is totally different from others because it has floating effect means when you scroll your page the social sharing widget also move with him, sounds awesome for your visitors and subscribers, follow the below instruction for better emphasize.

Open your blogger account.

Move on Template>> EDIT HTML>> Press CTRL+F for  open the search box.

Search </head> in the given search box.

Now paste the below code just above the </head> tag.
<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>
Replace 550px with your desire adjustment for changing the box width.

Then, open your b: skin CSS style sheet and add the below CSS styles in the style sheet.
#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;
}
As I told above change 550 as you want.

Afterwards, find the <div class='post-header'> and remember this code will appear two times, so replace the second code with the given below script.
<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 you wish to display this widget at end of post so replace the below code from the above script. When you will implement this widget in footer so it may be overlaps, to fix overlapping change 35px from higher digits.
<div class='post-footer'>
Lastly, click on Save Template and click on View Blog to check its position.

Connected Article: Sliding Scroll To Top Button for Blogger.

It really makes your work easy in social sharing, you can add more social network in this widget, but when you are doing editing so don’t forget to back up the template. Floating effect always admire visitors because it moves with your scrolling add it in your blog and if you like this widget so share with your readers and friends.

COMMENTS

Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Floating Social Sharing Buttons Below Blogger Post Title
Floating Social Sharing Buttons Below Blogger Post Title
http://4.bp.blogspot.com/-MQqAUg8OQv0/VZj1G8dauXI/AAAAAAAAIdU/2ak-5-znLG4/s640/Floating-Social-Sharing-widgets-below-blogger-post-title.JPG
http://4.bp.blogspot.com/-MQqAUg8OQv0/VZj1G8dauXI/AAAAAAAAIdU/2ak-5-znLG4/s72-c/Floating-Social-Sharing-widgets-below-blogger-post-title.JPG
PRO TECHNIFY
https://www.protechnify.com/2015/07/floating-social-sharing-widgets-blogger.html
https://www.protechnify.com/
https://www.protechnify.com/
https://www.protechnify.com/2015/07/floating-social-sharing-widgets-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy