Sliding Bar With Next/Prev Posts & Social Sharing Buttons For Blogger

I am very excited to announce one of the most anticipated widget that is inspired by Thenextweb blog that is equipped with Next, Previous ...

I am very excited to announce one of the most anticipated widget that is inspired by Thenextweb blog that is equipped with Next, Previous posts buttons with social sharing buttons for posts. The widget also enables advanced scrolling that is that when you move a certain distance from the top of your blog, your widget would start to slide down with the page.

You can also see one of the previous posts that enables such sliding: Scrolling AdSense Ad After Moving Down a Certain Distance From Top.

Before we move any further, take a look at our previous widgets:

•  Stylize BuySellAds Banners With CSS3 Leaf Effect for Fast Sales! 
• Stylizing Blogger Popular Post Widget With CSS3  
• 'The Next Web' Featured Post Widget With Shadow Effect

How to add the widget?

Step #1 Go to Edit HTML 

Navigate to your Blogger dashboard >> Template >> Edit HTML >> Proceed and backup your template.

Once the backup process is done, hit 'Expand widget template'.

Now look for the following code (Ctrl +F)

<div class='post-header-line-1'>

 Once you have found the code, simply paste the following code beneath it.


[lock]

[
    <div id='nxtprv'>
    <div id='nxtprvbackground'>
    <table style='width:725px;'>
    <tr>
    <td>
    <a expr:href='data:olderPageUrl' id='next-article'>
    &#8592; Prev Post
    </a>
    </td>
    <td>
    <a class='twitter-share-button' data-via='BLoggingeHow' href='https://twitter.com/share'>Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </td>
    <td>
    <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
    </td>
    <td>
    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
    </td>
    <td>
    <su:badge expr:location='data:post.url' layout='1'/>
    </td>
    <td>
    <span class='st_sharethis_large' displayText='ShareThis'/>
    </td>
    <td>
    <a expr:href='data:newerPageUrl' id='next-article'>
    Next Post &#8594;
    </a>
    </td>
    </tr>
    </table>
    </div>
    </div>
    <style>
    #nxtprv {
      position: absolute;
    }
    #next-article  {
        background: none repeat scroll 0 0 #EF4423;
        border-radius: 2px 2px 2px 2px;
        color: #FFFFFF;
    float:left;
        font-weight: bold;
        height: 2em;
        line-height: 2.125em;
        padding: 0 0.875em;
        text-decoration: none;
        text-transform: uppercase;
        vertical-align: top;
    }
    #next-article a:visited{
    color:#FFFFFF;
    }
    #nxtprvbackground  {
        background: none repeat scroll 0 0 #FFFFFF;
        border-bottom: 1px solid #D2D2D2;
        border-top: 1px solid #D2D2D2;
        color: #424242;
        margin-bottom: 1em;
        padding: 0.625em 0;
    }
    </style>
]

[/lock]

Step #2 Add the Sliding JavaScript

Now save your template and navigate to Layout section of your Blogger blog. Hit 'Add a Gadget' >> HTML/JavaScript.

Now paste the following widget java script with in it.

<script>
window.onload = function() {
  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }
    var d1 = document.documentElement;
    if (d1.clientHeight) {
      // IE in standards mode
      return d1.scrollTop;
    }
    // IE in quirks mode
    return document.body.scrollTop;
  }
  window.onscroll = function() {
    var box1 = document.getElementById('nxtprv'),
        scroll1 = getScrollTop();
    if (scroll1 <= 500) {
      box1.style.top = "540px";
    }
    else {
      box1.style.top = (scroll1 + 40) + "px";
    }
  };
}
 </script>

Now to adjust the following parameters according to your blog's layout:

To adjust the widget's distance from the top of the blog:

scroll1 <= 500

To adjust the distance between the widget and the top when the widget is sliding state:

box1.style.top = "540px";

Note: Always set the scroll1 + 40 value as the difference between the first two values for smoother scrolling. In case its not equal to the difference, the widget would get a little bump before it starts scrolling.

so 540 - 500 = 40 = scroll1 + 40

 Hit save. Thats all!

You may like to read:

•  Add Elegant Email Subscription/Signup Widget To Your Blog
• Mashable Sharing Widget With Google+ Add To Circles / Search Bar

Need any help?

In case you need any help regarding the widget, leave out your queries below guys. It would be a pleasure to clarify the issues. If you liked the widget, DONT FORGET to share the post in your social circles.