How to Add floating social sharing media button to blogger

How to Add floating social sharing media button to blogger

Fast Copy the html code from the below  box

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

(1) Now go to >> blogger dashboard and edit htm
And Search A Ctrl+F   </head>
Now copy the code and paste the code above </head> tag 





 

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

}

 (2) Now search ]]></b:skin> and copy the html  code paste above  ]]></b:skin>

 

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

(3) Now search <div class='post-header'> and copy the Html code pad paste above <div class='post-header'>

Now save your template 


Dont forget to like us on facebook.