Floating Older/Newer Post Button for Blogger

One of the most important things we should keep in mind about our blog’s design is the ease of navigation. We should provide our users with an easy and attractive navigation system in our blog. Easy navigation doesn’t meant to keep your blog design simple. It should be attractive and eye catchy.

Most often, the older/newer post links in our blogs are always kept at places where people won’t easily notice it. And that’s on big mistake we can ever do to lower our page views. So let us correct that mistake by adding this stylish floating next or previous post links button. This attractive and eye catching buttons floats on the either sides of your blog’s sidebar.

 SEE A LIVE DEMO WORKING

How to have a Floating Next – Prev Post button in your blog?

✔ Go to Blogger dashboard > Template > Edit HTML
✔ Now search for ]]></b:skin> and paste the below code just above it

.arrowLeft a {position: fixed;z-index: 100;left: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowLeft a:hover {left: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowRight a {position: fixed;z-index: 100;right: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowRight a:hover {right: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowNav a {background: #000000;color: #fff;text-decoration: none;font-size: 16px;}

 ✔ Now search for <b:includable id='nextprev'> and find the below coding in your template

<b:includable id='nextprev'><div class='blog-pager' id='blog-pager'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><!-- DHI the newer post --><div class='arrowLeft'> <a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'><span class='arrow'/><span class='prevnext'>&#8592;</span></a> </div></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><!-- DHI the older post --><div class='arrowRight'> <a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'><span class='arrow'/><span class='prevnext'>&#8594;</span><br/></a></div></span></b:if><b:if cond='data:mobileLinkUrl'><div class='blog-mobile-link'><a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a></div></b:if></div><div class='clear'/></b:includable>

 ✔ Now completely replace the above coding with the below one. !important

<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <div class='arrowNav'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <!-- DHI the newer post --> <div class='arrowLeft'> <a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'> <span class='arrow'/> <span class='prevnext'>&#8592;</span></a> </div> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <!-- DHI the older post --> <div class='arrowRight'> <a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'> <span class='arrow'/> <span class='prevnext'>&#8594;</span><br/> </a></div> </span> </b:if></div> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:if cond='data:mobileLinkUrl'> <div class='blog-mobile-link'> <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a> </div> </b:if> </div> <div class='clear'/></b:includable>

✔ Now that’s it. It should be floating on your blog now. Take a look.