New Style Smooth Floating Social Bookmarking Widget With Pin It For Blogger 2013

New Style Smooth Floating Social Bookmarking Widget For Blogger 2013

 
Today I have a new Floating Social Media Bookmarker and Sharing Widget with Smooth Scrolling and new look. Sharing on social media we all know and I have already discussed deeply about benefits of Social Media, because its bring flood of traffic to our website.

 

How to Install New Smooth Floating Social Media Bookmarking to Blogger.

Simply go to Blogger.com > Blogger Dashboard
Then Backup you blogger template

Go to > Layout > Add a Gadget > HTML/JavaScript Widget (wherever you want but must be in sidebar) not in footer.

Then copy this following code and past in HTML/JavaScript Gadget.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#FloatingSocialButtons").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#FloatingSocialButtons").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#FloatingSocialButtons").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#FloatingSocialButtons {
position: absolute;
left: -100px;
background-color: #F2F2F2;
border: 1px solid #D8D8D8;
border-right: 0;
z-index:9;
border-radius:10px;
-moz-border-radius: 10px;
}
#FloatingSocialButtons div {
margin: 5px 0 0 0;
}
</style>


<div id='FloatingSocialButtons'>
<center>
<div style='margin:0px 0 0px 10px;'><div id='fb-root'></div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like font='' href='' layout='box_count' send='false' show_faces='false'></fb:like></div>
<div><a class='twitter-share-button' data-count='vertical' data-lang='en' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script></div>
<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script><g:plusone size='tall'></g:plusone></div>
<div style='margin-top: 15px;'><a data-pin-config='vertical' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url='data:post.url' '><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='vertical' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'></a></span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script></div>
<br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://s2free.blogspot.com/2013/05/new-style-smooth-floating-social.html' style='color:#CAC8C8;'>Get This</a></p>
</center></div>

You have all done Now Check your blog home page.. I hope you will like my this widget.