How To Create Floating Older and Newer Post Buttons in Blogger

Advertisements
Are you frustrated because of High bounce rate? Does a visitor spend much lesser time on a website? All these mind wobbling questions may prove out to be a nightmare for bloggers. Though, we have previously discussed that High Bounce rate doesn’t affect websitecredibility, but it doesn’t mean that it is useless or worthless. Repeatedly, many Blogger users’ complaints about High Bounce rate, but this matter is mysterious because the functionalities of Blogger Platform are not that excessive. This is the reason why Blogger users always have to count on external sources. To help a webmaster in Reducing Bounce rate and increasing the time spend by a visitor on a website we have coded an awe-inspiring Widget, that would make Blogger’s OLDER and Newer Post Button scrollable. Today in this Article, We will be learning How To Create Floating Older & Newer Posts Buttons in Blogger.

Before, we reveal how the Floating Older & Newer Posts Buttons looks like let us first quickly review the current buttons which is in use on each and every site that operates on Blogger. Usually they appear at the end of all Articles, so chances are extremely high that people won’t scroll down to the end of the page. This is the reason it is essential to have floating Buttons that revolve with the visitors whenever they scroll up or down the page.  We have attached a screenshot below so people can understand without any hesitation whatsoever.

What is Floating Older and Newer Post Button?

Have you seen those Socialsharing widgets in which the Facebook Like and other social buttons floats along the screen? In this widget, we have used the same technique to make these buttons scrollable. We have combined the Blogger XML Dynamics with a modest CSS Technique. Neither JavaScript nor Jquery file is utilized is this widget, all the credit goes to CSS. It floats along the screen whenever a visitor navigates up or down the page. Consider the following screenshot.

Where These Floating Buttons Would Appear?

These Older and Newer Posts Buttons would appear just next to your Articles. The older Post button would appear on Left while Newer Post button would appear on the right side of the screen. To make this thing work perfectly, it is essential to have a properwrapper template. Consider the following screenshot to learn more about its appearance.

How To Create Floating Older & Newer Post Buttons in Blogger?

Just like our other tutorials, the steps are extremely straightforward, and would hardly soak less than 10 minutes to complete the integration. We have tried our level best to keep the tutorial as shot as possible. Follow the following instructions.

  • Go To Blogger.com >> Template >>Backup the Template.
  • Then Select Edit HTML >> Proceed.
  • Select (Tick) the Expand the Widget Box.
  • Now within the template search for ]]></b:skin> and just above it paste the following coding.
/* --- MyBloggerLab Floating Older & Newer Posts Buttons For Blogger --- */
#blog-pager-newer-link {
padding-left : 1030px;
border : none;
float : left;
text-transform: uppercase;
}

#blog-pager-older-link {
float : right;
padding-right : 585px;
text-transform: uppercase;
border : none;
}

.MBLprevlink{ margin-left:-100px; position:fixed;top:45%;display:block;font-weight:bold;font-family:arial; font-size:16px;color:#333;text-decoration:none;width:66px;height:140px;background:rgba(231,231,231,0.3);z-index:99;opacity:0.6;-webkit-transition-property:all;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}

.MBLprevlink:hover,.MBLprevlink.showFull{background:rgba(231,231,231,0.6);opacity:1}.MBLprevlink:hover .detail,.MBLprevlink.showFull .detail{width:220px}.MBLprevlink .label{display:block;position:absolute;top:60px;left:14px;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);opacity:0.5}.MBLprevlink .detail{width:0;line-height:1.6em;color:#77a6d2;background:rgba(31,31,31,0.7);font-family:&quot;Capriola&quot;,sans-serif;overflow:hidden;position:absolute;top:0;left:70px;-webkit-transition-property:all;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-ms-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-o-transition-delay:0.5s;transition-delay:0.5s}.MBLprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}.MBLprevlink .detail span:hover{color:#fff}.MBLprevlink .arrow{width:0;height:0;font-size:0;height:0;position:absolute;top:49px}#prevLink{left:30px}#prevLink .arrow{border-right:20px solid rgba(231,231,231,0.3);border-bottom:20px solid transparent;border-top:20px solid transparent;left:-20px}#prevLink:hover .arrow,#prevLink.showFull .arrow{border-right-color:rgba(231,231,231,0.6)}#nextLink{right:30px}#nextLink .detail{right:70px !important;left:auto}#nextLink&gt;span{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}#nextLink .arrow{border-bottom:20px solid rgba(231,231,231,0.3);border-left:20px solid transparent;border-right:20px solid transparent;right:-30px}#nextLink:hover .arrow,#nextLink.showFull .arrow{border-bottom-color:rgba(231,231,231,0.6)}

.MBLprevlink{opacity:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAqjbb0mlVYgkFpYLVePJZYXxxFa1ukg4wfrxgYOGHKCLbRBPp_sCDUyBlyXx-zkTcBBjeR5ldvisB1dHnkCuxl17X_3IVUR78FPR_eDJAfiRXEyyAkR3L4fqaoBx93DN8E_1xaAUFqQ/s1600/HP-Laptop-Luster.png) repeat-x scroll 0 0;color:#cc3435}.MBLprevlink:hover,.MBLprevlink:active,.MBLprevlink:focus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAqjbb0mlVYgkFpYLVePJZYXxxFa1ukg4wfrxgYOGHKCLbRBPp_sCDUyBlyXx-zkTcBBjeR5ldvisB1dHnkCuxl17X_3IVUR78FPR_eDJAfiRXEyyAkR3L4fqaoBx93DN8E_1xaAUFqQ/s1600/HP-Laptop-Luster.png) repeat-x scroll 0 0}.MBLprevlink .label{opacity:1 !important}.MBLprevlink .arrow{display:none !important}#nextLink{right:10px !important}#prevLink{left:10px !important}

  • Now once again within the template search for the following HTML and XML Coding. Remember: it is not essential that you may find the same coding. However, look for the similar piece of coding. Make sure the Widget is Expand otherwise it wouldn’t work. Tip: Search for <b:includable id='nextprev'> to find the rest of coding.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  • Once you find the above coding in the template, Replace it completely with the following piece of HTML and XML coding. Remember: It is essential that you may replace the above coding correctly (Matching tags) otherwise it would not work.
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
         <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
    <!-- MBL the newer post -->
<a class='MBLprevlink' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'><div class='relative'>
<span class='arrow'/>
<span class='label'>Newer</span>
</div></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
     <!-- MBL the older post -->
<a class='MBLprevlink' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'><div class='relative'>
<span class='arrow'/>
<span class='label'>Older</span><br/>
</div></a>
      </span>
    </b:if>

All Done: That's it, Go a head and save the template by pressing Save Template button. Now rush and visit your website and enjoy the incredible floating Buttons. We bit everyone would love this functionality. 

Some Frequently Ask Questions:


Question#1: Instead of floating in Side, next to the content, my buttons are floating over the content. How to Solve?
Answer: Well, the possibilities are high that the width or your theme is a bit different so to move these buttons to the side of your site. Simply do as mentioned below. 
  • Go to Blogger >> Template >> Edit HTML >> Proceed.
  • For Older Button: Search For 585px and adjust it by either reducing or increasing the numbers. 
  • For Newer Button: Search For 1030px and adjust it according to the desire needs.
  • Save the Template.

Question#2: How to change the Background of the Buttons?
Answer: Since, we have used a image in the background. Therefore, you have to replace the picture in order to change the background. Do as mentioned below.
Search for the Following and replace it with your Image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAqjbb0mlVYgkFpYLVePJZYXxxFa1ukg4wfrxgYOGHKCLbRBPp_sCDUyBlyXx-zkTcBBjeR5ldvisB1dHnkCuxl17X_3IVUR78FPR_eDJAfiRXEyyAkR3L4fqaoBx93DN8E_1xaAUFqQ/s1600/HP-Laptop-Luster.png


Question#3: Does This Widget Works on Custom Template?
Answer: Yes, This theme works perfectly on any Blogger template as long as you follow the instructions correctly. However, if you need any help feel free to leave your comments.  

From the Editor's Desk:

Hope everyone has enjoyed the floating feast. To be honest, that what we call a PRO Blogger Widget. It is extremely remarkable, and we are so proud that MBL Team has developed this widget. Truly, it wouldn’t be possible without the support of our fellow MBLians who always appreciates our work. What is your point of view about these floating buttons? What is missing in this widget? Take a lot care of yourself till then, Peace, blessings and happy floating.

ATTENTION: This widget and its coding are solely generated by Mr. Syed Faizan Ali and his Team. However, anyone can share this widget on his blog until or unless he gives proved credits to MyBloggerLab.com. It’s a warmhearted request from our Team.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

28 comments

November 25, 2012 at 12:21 PM

hi sayed
I saw this on your blo and was about to ask for the coding as it can help the blogger to have more traffic.
Rahul
Www.guidemumbai.com

Editorial Team MOD
November 25, 2012 at 12:37 PM

Hey Rahul, Thanks for liking and leaving a Comment. And Yeah, We finalized and applied this widget today on our site. Therefore, we thought that to share it with out Readers As Soon As Possible so they can take benefit from it.

Thanks For Visiting. Take a lot care. Peace and Blessings

November 25, 2012 at 7:11 PM

can we add in some other section like mbt 's sticky bar?

Editorial Team MOD
November 26, 2012 at 12:12 AM

Nope, This cannot be added in the Sticky bar because it float it self on the left and right side of the Blog. Hope that Helps. Peace

November 26, 2012 at 4:39 AM

Syed bro how mustafa bro from mbt did on his sticky bar?

Editorial Team MOD
November 26, 2012 at 5:56 AM

Dude, That is Other Script which is used on MBT. They Have Justed Added Images with Older and Newer Post Link. That is not too Complicate to Develop.

However, We can't incorporate this "Coding" because it has floating functionality Plus lots of other features. So (THIS CODING) wouldn't work properly on the Sticky Bar. Hope that helps. Peace

November 26, 2012 at 6:29 AM

Another great post; keep it Faizan you are actually writing history. Please visit my article on difference between niche website and niche blog at http://www.idealnichecompany.com/top-13-differences-between-niche-blog-and-niche-website/

November 26, 2012 at 6:50 AM

nice snippet master :)
do you want try for other style ?
http://beben-koben.blogspot.com/2012/11/newer-older-post-blogger-motyar-style.html
hehehe :D

Editorial Team MOD
November 26, 2012 at 7:07 AM

Yeah, I was Currently Viewing your Article and to be honest, Job Well done. Keep on producing quality articles and stay tuned to MBL for more Awesome Widgets and tweaks. Peace and Blessing Pal

Editorial Team MOD
November 26, 2012 at 7:09 AM

Thanks Mate for considering as Helpful. Yeah I Checked your article and my words you have a great writer hidden in yourself. Keep up the spirit and you will be the next Paki Pro Blogger. Peace and Blessing Pal.

November 26, 2012 at 7:14 AM

As well as you master :)
I hope you understand with the language :D

Editorial Team MOD
November 26, 2012 at 7:18 AM

Yeah, I used Google Translate to understand the Language. I Think its written in Malaysian Language. Any ways, Well Done. Peace

November 26, 2012 at 7:11 PM

Bro cant you guide it to add in sticky bar?

Editorial Team MOD
November 29, 2012 at 7:39 AM

I Don't think so. It should work because you are Using MBL Freshable Theme and we have tested this widget on it. Moreover. we visited your site and we didn't find the coding there. Follow the steps properly. Peace and Blessing Buddy!

Editorial Team MOD
December 21, 2012 at 2:04 AM

Hey Man. Really Appreciate that you Featured our 2 Widgets. To be honest, It give us more power to Create Stunningly Beautiful Widgets. Take Care Peace.

December 29, 2012 at 10:17 AM

I like to use arrows for the buttons, but they are both pointing the same way :(

How can I tell the one on the right to flip around ?? :o

December 29, 2012 at 10:19 AM

the problem is that both previous and next point to the same image adress. Is there a way to flip the one on the right horizontally or make it point to another image adress with a button that is flipped?

Editorial Team MOD
December 29, 2012 at 10:19 AM

Since, we have used the Same CSS coding for both Buttons. Thats why it is pointing to the same Directing. Soon We would release Arrow Based buttons. Stay tuned to MyBloggerLab

Editorial Team MOD
December 29, 2012 at 11:18 AM

As we have told you, we have used same CSS for both buttons therefore it applies on both. You can paste the CSS coding two times and change the DIV Classes accordingly. Its a bit tricky for you so we suggest you to wait for few days till we publish a detailed tutorial on it

January 6, 2013 at 1:35 AM

its not coming in my home page/label.... its only in my posts!!! why?? plz help me how to bring it in my blogger home page???

Editorial Team MOD
January 6, 2013 at 2:05 AM

There must be a Problem in your Theme? Provide your Website URL

January 6, 2013 at 3:35 AM

how i repiar it??

January 11, 2013 at 8:28 PM

i have problem .. when i press older there is no newer in the right hand side ... where is this bottom?

January 11, 2013 at 8:53 PM

http://moehtetlulinpyo.blogspot.ru/
i have problem .. when i press older there is no newer in the right hand side ... where is this bottom?

Editorial Team MOD
January 12, 2013 at 11:22 AM

There is some kind of problem in your Template. Change the theme and then reapply.

Or Create a Dummy site and apply on it we are sure it will work.

January 19, 2013 at 1:31 AM

nice widget, but not working in my blog www.pokharatech.com .

January 23, 2013 at 3:50 AM

How to replace the old and new buttons by the titles of the next and previous post on my blog
thanks

Editorial Team MOD
January 23, 2013 at 6:18 AM

That's not possible with the current widget.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.