Add Floating Newer & Older Post Button's in Blogger

So as you all know navigating in blogger is till bit difficult as blogger does not not have any plugin support so any new visitor might not see those older and newer post link below to scroll to next post but I posted how you can enable the keyboard navigation in blogger so that anyone could easily navigate to next post by just using the keyboard keys. Well today I am posting another good and practical way for navigating previous and next post, well now you can add this awesome floating buttons that will slide as visitor scrolls down, so he can always see those buttons and can click on them to navigate to next post.

So now using this you could easily decrease your blogs bounce rate as people will have more easier option to view more and more posts on your blog and this one really is a life saver. So now implementing this in blogger is really easy, so check below steps.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

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

3. Now search for <b:includable id='nextprev'> tag & you will see code like below.
   
4. Now just select all code from <b:includable id='nextprev'> till </b:includable> and replace it with below code.

   <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'><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'><img src="http://i.imgur.com/4sieEVz.png"/></span></a></div></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><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'><img src="http://i.imgur.com/1uAQUbN.png"/></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>

5. That's it now just hit Save Template and refresh your blog to see these buttons floating with left and right arrow.