Blogger jQuery Scrolling Social Bookmarking Bar On Posts




| 52 comments

Bookmark Bar Blogger Screenshot
The most requested tutorial over the last few months has been for the scrolling share buttons that sit alongside posts and scroll down the page with the reader.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 giving readers the option to share at any time.The gadget I have been using for the past few months and I share with you today has the following options : Twitter Share, Facebook Like, Stumble Upon, Google+, Pinterest Pin It and a Rss Feed Icon.Wordpress users can try out the Wordpress Share Bar listed in this post.

Video Tutorial - For extra help at the end of the post I have a video tutorial displaying the steps.

At the moment this gadget is in use here so you should be able to see it, you can also see another demo below.

View Demo Button

As this is an advanced gadget there are 9 steps to add it to your blog so more than ever its important to back up your template first in case of mistakes, then take your time and you should have no problems.

Add The Sticky Scroll Bar To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

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 as shown in the video Below :



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 - How To Find Code In Blogger Template Template)

<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='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='&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/spiceupyourblog' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='http://3.bp.blogspot.com/-Gwmjs5V-gQ0/Tx7dIzN3I8I/AAAAAAAAFYM/2V9IaJE1_ww/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 http://www.spiceupyourblog.com-->
Important - Replace Your-Twitter-Username with your Twitter URL and the URL in yellow with your Rss Feed URL.

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 - How To Find Code In Blogger Template Template)

]]></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 - How To Find Code In Blogger Template Template)

</head>

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

Note - The line of code in Yellow 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. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 9. Copy And Paste The Following Code Directly Below / After </head>

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


Step 10. Save your template.

Video Tutorial




That's it hopefully you were able to follow the steps and add the fixed sticky share bar to your blog.Make sure to check out more of our Blogger Tips and Gadgets.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

52 comments:

  1. Replies
    1. yoe.. you right.. it's full stylish

      Delete
  2. i have been wait for a long time.. thanks for release the widget ^_^

    ReplyDelete
    Replies
    1. Your welcome Danialde4, I have been waiting to get a version made that would suit all blogs.

      Delete
  3. there is a plugin for wordpress?

    ReplyDelete
  4. I have followed the directions to add to blogger, but nothing shows up. I only previewed my blog, using the "Preview" button on the Edit screen, after installing the codes. Do I need to save it first?

    ReplyDelete
    Replies
    1. Sylvia I have this gadget set to only show on posts not the home page.So yes the preview only shows you your home page and that will be the problem.

      Delete
    2. Hey Paul! Thanks for the answer.....I have it on my page now, but it won't scroll! Any ideas?

      Delete
    3. Wow I thought it didnt work, never thought to open the post, looks great, thanks.

      Delete
  5. hi paul... Thanks for suggestions like creating stylish signature. reading your post i shifted to custom domains three months back from .blogspots.
    Though i don't know where to ask this questionn so i m asking you in this comment - " Is there any way to create a css sheet for disquss platform to give it a beautiful look ? "

    ReplyDelete
  6. hello!
    tnx for this widget!
    plz help me why not Scrolling me?!
    what problem me?!

    ReplyDelete
  7. well.Your post is so amazing and I like your style very much.I wish to see more articles from you.


    Good day!!!

    ReplyDelete
  8. Hi Paul, I love your site and your posts are very helpful. I've been looking for this sticky social bookmarking bar as I've seen in your website. And I really like to have it in my blog, but I can't get it to work. Can you please help me? I followed the instructions though. Here's my blog, can you kindly check it please? Thanks in advance! http://redlovenotes.blogspot.com/

    ReplyDelete
  9. Hey Paul!

    I love this widget, and I wish to get this working on my new site; however, I post the code, go into a post, and all I see is the start of an outline of the widget. I see it moving when I scroll down as well, but I don't see the buttons, etc, for people to click on to share. Any suggestions?

    ReplyDelete
  10. Blogger gives an error code. Please help me out!

    ReplyDelete
  11. Fantastic! I wanted to remove it before styling it some more, however, I can't seem to do so. I removed all of the code from each step, but it is showing up at the top of each post (not floating on the side) and looks quite funky. Any suggestions for me? There doesn't seem to be any line of code from the tutorial above that I can search for and find within my html. I'd love any solutions or suggestions you have to offer. I appreciate all you share. Thanks.

    ReplyDelete
  12. I panicked too soon. I found my error and am excited to give it another go! Thanks!

    ReplyDelete
  13. Just added this, looks fantastic and works really well, thank you!

    ReplyDelete
  14. Is there a way to stick the widget so it remains in the center as one scrolls? I always find the 'following' widgets to be a little distracting. Just wondering. Thanks.

    ReplyDelete
  15. Is there anyway to remove or change the tweet " via @paulcrowepro" has turned off some of my readers and are asking who that is. thanks

    ReplyDelete
  16. Two questions:
    1. Is it possible to get the sticky bar to appear on the home page, and if so can u create a tutorial for it or simply sum up how to do it right here in the comments section?

    2. Is it possible to get the sticky bar to appear on "pages"? If so, can you create a tutorial on it or quickly sum up how to do it right here in the comments section? If not can you suggest any alternatives to the sticky bar that will work on "pages"?

    ReplyDelete
  17. i dont know what is happening? I did everything but not appear in my blog, may be it is a conflict with another code? Please help me. this is my blog:
    Iglesia Cristiana Evangelica

    Thank you for your support

    ReplyDelete
  18. Where Do I Find the RSS Feed URL?

    ReplyDelete
    Replies
    1. Every blog has a default feed, however if you don't understand rss feeds you really do need to familiarize yourself with it.Search google and learn as much as you can on the subject, it is a huge part of blogging...

      Delete
  19. Good day, Paul i'm having the same problem. This widget is not showing on my site. i did everything on your step but it's not showing on my site.

    ReplyDelete
    Replies
    1. Hi, the gadget is working if you followed the steps correctly.You may have made an error I'm afraid..

      Delete
  20. Thank u dude !! reallyloved it

    ReplyDelete
  21. It worked but there is a problem. the widget is behind the side bars. ie,my layout is like |-|
    so this widget is behind the left " | ". Please can you make it appear front .

    ReplyDelete
  22. I could not find in my blog. I recently changed the template. So now could you kind me.

    ReplyDelete
  23. Really love this and want to use it, but inserting the code made it show up inside/behind my post instead of to the left of it. My template has a left side bar, so I switched it to a right side bar thinking that would fix it, but it didn't. :(

    If anyone has any ideas on how to make it work I'd appreciate it :D

    ReplyDelete
  24. Hey Paul, I have one of your custom templates and I tried to add this widget but I can't find '' in the step 2. Is there an alternitive code I can use to complete steps. Thank you.

    ReplyDelete
  25. How i Change the position to the left Side?,help Please

    ReplyDelete
  26. Dude, this thing is coming in the center but i want it on the left side of blog..please help..

    ReplyDelete
  27. Paul, I couldn't find " " .... any suggestions?

    ReplyDelete
  28. how to change the background ?

    ReplyDelete
    Replies
    1. Remen, in step 5 the third line you have this :

      - background: none repeat scroll 0 0 #fff;

      #fff is the background color.This is using hex values in which #fff is white.You can change this or remove #fff for it to be transparent.Check out our hex color code gadget in the top menu under tools.

      Delete
  29. Will this not work on classic templates? I tried adding it http://blog.co-bear.com/ but but it wouldn't show up.

    ReplyDelete
  30. Paul, I've done everything in this guide, but the widget hasn't shown up! Can you please check http://lividiocity.blogspot.com and check what's wrong?

    ReplyDelete
  31. Hi there Paul,

    At first, it was all fine and working great. But then one day, it stop scrolling. Can you help me out on how to bring it back the scrolling effect.

    Here's my blog: http://urkpop.blogspot.com

    Thanks a lot, Cheers!

    ReplyDelete
    Replies
    1. I would imaging the problem is you added another jQuery gadget.If you add jQuery script twice to your template it will effect your gadgets.So try removing this line of code from your template and see if it works :

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

      Delete
  32. hey paul! I tried to add this to my html code but it wouldn't even save my changes! is gave me the following error message:
    div should not appear inside of head
    help!
    thanks

    ReplyDelete
    Replies
    1. Kassem, If you got these errors you either placed the code in the wrong part of your template or made an error copying the code.

      Delete
    2. Well, what about my problem? Everything was added correctly and the template saved OK, but the gadget won't even show up. Let me know if it can be fixed easily or not because if not I have to remove the code!

      Delete
    3. Rishabh Your comment reads like your angry, be happy :) If you added everything correctly then maybe another gadget is affecting it.You may have the jQuery script in your template twice.In step 7 above I have a line of code highlighted remove this and see if it works.

      Delete
    4. Haha, I wasn't angry, Paul, just impatient because I couldn't get it to work.

      I tried removing the jQuery script line, but that didn't change anything. If possible, could you have a look at my template and tell me what would affect it? It's the "lividiocity" blog. I'd greatly appreciate it! :)

      Delete
  33. Hey there! I added this widget to my blog... but now my homepage slider doesn't work. And ideas on what to do? Any help is much appreciated! Here is my blog: http://theheartlandhomemaker.blogspot.com/

    Awesome widget BTW! Thanks!

    ReplyDelete
  34. i used you codes in ma site but i dint get the layout as u have and its not sliding along with me as i scroll please help me out. thanks in advance

    ReplyDelete
  35. Is it possible for you to share the one (sticky bar)that you/re currently using on your site? It looks fanstastic and would love to have something like that : )

    ReplyDelete
  36. Thank you very much! I've been looking for something like this. I already used it in my blog. Thank you again! Cheers :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us