How to Add - Fixed sticky slide/scroll bar with social media icons?

When we scroll down the post, the visitor will not find the social media icons displayed on the screen.
Because of this, we may loose some people who are willing to share but some how miss out as the social media share icons are not visible when they are scrolling down the blog.

To solve this issue, we can have a simple jQuery code added to blog template HTML code.

1. Go to: Dashboard -> Template -> Edit HTML

2. Search for the below code.

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

3.  Copy and paste the code directly After/Below <b:includable id='post' var='post'>.

<!--Start Sticky Bar Code--> <b:if cond='data:blog.pageType == "item"'> <div id='share-buttons'> <div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='YOUR-TWITTER-USERNAME' 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='"//www.facebook.com/plugins/like.php?href=" + data:blog.url + "&send=false&layout=box_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=90"' 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='"http://pinterest.com/pin/create/button/?url=" + 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('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999); document.body.appendChild(e); } </script> </center> <br/><a href='http://feeds.feedburner.com/spiceupyourblog' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3TQFacEDThrxVwoe55rh-D88ApbxyjptVfiAWoreL421dvvglD0mrpvUw6EWDLoO1viUGMKQIQfsIUo9DVAWflo68YTduxis3AWrdtkrAT683fPjBE-T4kT6mSOJ9JQgx0Gea8_ie2w/s1600/rss-seat.png'/></a> <br/><a href='http://www.spiceupyourblog.com/2012/05/jquery-scroll-bar-social-bookmark.html' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div> </b:if> <!--End Sticky Bar Code-->

Replace: User name by Twitter username and URL by RSS feed URL.

4. Find the below code.

]]></b:skin>

5. Copy and paste the below code directly Above/Before ]]></b:skin>.

/*Start Sticky Bar Css*/ #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*/

6. Find the below code

</head>

7. Copy and paste the below code directly Above/Before </head>

<!--Start Sticky Bar Scripts--> <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 () { $('#share-buttons').stickySidebar({speed: 300, constrain: true}) }); </script> <!--End Sticky Bar Scripts-->

NOTE: We do not need the below code in the code mentioned above is jQuery is already added to the template.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>


8. Find the below code from HTML code.

</head>

9. Copy and paste the below code directly Below/After </head>

<!--Start FB Code--> <div id='fb-root'/> <script> (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script> <!--End FB Code-->

10. Save the Template and View blog to see the changes.

Now the blog should have the sticky slide/scroll bar added to blogger.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.