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 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.

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

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

Sliding Bar With Next/Prev Posts & Social Sharing Buttons


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


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:


Need any help?

need 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.smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Sliding Bar With Next/Prev Posts & Social Sharing Buttons For Blogger
Sliding Bar With Next/Prev Posts & Social Sharing Buttons For Blogger
http://3.bp.blogspot.com/-v_W1Zhad_nQ/UfINxgHVLlI/AAAAAAAALXI/cMQY9G1P1nM/s1600/sliding+social+sharing.png
http://3.bp.blogspot.com/-v_W1Zhad_nQ/UfINxgHVLlI/AAAAAAAALXI/cMQY9G1P1nM/s72-c/sliding+social+sharing.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/11/sliding-bar-with-nextprev-posts-social.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/11/sliding-bar-with-nextprev-posts-social.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade