Add a floating Social Media in blog

Step1

Open blogger accout>template>edit HTML

Step2

Click anywhere inside a code window press

CTRL+F

</head>

And paste this code in search box

and press enter

Step3

Just Copy this and paste above </head>

//<![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>

Step4

before this ]]></b:skin> Add this 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;

}

Step5

Just below this Code Second <div class='post-header'>
In your html 2 find you paste this code in second

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

Add a floating Social Media in blog