How To Create Floating Older and Newer Post Buttons in Blogger

Socialize It →

Tweet

28

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

About the Editorial Team

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