Fixed Scrolling Social Bookmarking Bar Beside Posts For Blogger

This gadget is popular on all the top blogs and really does help increase the number of times your posts get shared on Twitter, Facebook and other social networks.Using jQuery we attach a bar to the side of your blog posts with bookmarking buttons, as the page scrolls the bar neatly follows...

Remember: Always Back Up Your Template Before You Make Changes


Step 1: In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box.


Step 2: Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

<b:includable id='post' var='post'>

Step 3: Copy and Paste the following code Directly Below / After <b:includable id='post' var='post'>

<!--Start Sticky Bar Code http://www.spiceupyourblog.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='paulcrowepro' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:blog.url + &quot;&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=80&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=arial&amp;amp;height=90&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:90px;'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center><br/><a href='http://feeds.feedburner.com/Your username here' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUL_t6PWnsAmd9JW7znDpt-NWrWseXkmpiYEZ5ucNc5fZL6UC9bX3b_Zkg55ixyeYafHDOMVlzmndbionoZK6yMue8MXJ9fEg9Oa9NyzPPEn9oSAxzaD-O8ywSEj95BcWUuLIEgp7OnwY/s1600/rss-seat.png'/></a>
<br/><a href='http://www.spiceupyourblog.com/' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div></b:if>
<!--End Sticky Bar Code http://toolsforblogger.blogspot.in-->

Important - Replace the Text in Red to your username.


Step 4: Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

]]></b:skin>

Step 5: Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

/*Start Sticky Bar Css http://www.spiceupyourblog.com*/
#share-buttons {
background: none repeat scroll 0 0 #fff;
border: 1px solid #CCCCCC;
left: -80px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;


}
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}
.facebook.sbutton .fb_ltr{width:40px !important;}
.post-outer{height:auto;}
#main{position:relative;}
#main-wrapper{position:relative;}
/*End Sticky Bar Css http://www.spiceupyourblog.com*/

Step 6: Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

</head>

Step 7: Copy And Paste The Following Code Directly Above / Before </head>


Note: The line of code in Red is the jQuery script.If you previously added jQuery to your template you do not need to add this.

<!--Start Sticky Bar Scripts http://www.spiceupyourblog.com-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4701293254/share-bar-script.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;#share-buttons&#39;).stickySidebar({speed: 300, constrain: true})


});
</script>
<!--End Sticky Bar Scripts http://www.spiceupyourblog.com-->

Step 8: Save your template.