If you bored and frustrated to use older style type Blogger Next and Previous button and if you want to change this button to wordpress style Pre & Next page navigation button. It’s very cool and easy to navigate any user. 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?
Floating Oder and Newer post button , It’s very fany and use CSS3 design to easy to navigate pages.It’s work & looks like digitalhubinc.com header floating navigation menu and Way2blogging.org Social floating buttons. In this button use same CSS3 and Xml code to create this widget. It’s very simply parsed by Blogger editor. Neither Java Script nor Jquery file is utilised is this widget, all the credit goes to CSS. It floats along the screen whenever a visitor navigate up or down the page. Consider the following screenshot.
How to looks like and Where These Floating Buttons Would Appear?
This older and newer button show on align on left and right side of blogger post along with border of blog both side. This is relatively slide on different side and show arrow button to newer and older post. It’s black and block format button show in fig and also see in given demo.
Features : Floating Button , Fixed Position , sliding arrow {use hover code by css} , black , block , left and right on border sides.
How To Create Floating Older & Newer Post Buttons in Blogger?
- 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.
/* --- Digital Hub Inc. Floating Older & Newer Posts Buttons For Blogger --- */.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 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'>
<!-- DHI the newer post -->
<div class='arrowLeft'> <a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' id='nextLink'>
<span class='arrow'/>
<span class='prevnext'>←</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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle' id='prevLink'>
<span class='arrow'/>
<span class='prevnext'>→</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>
- 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'> <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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' id='nextLink'> <span class='arrow'/> <span class='prevnext'>←</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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle' id='prevLink'> <span class='arrow'/> <span class='prevnext'>→</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>
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.
From the Editor's Desk:
Hopefully every one has enjoyed this post and work to all blog. It's very good widget to use for blogger for user easy to use your blog and spend more time in your blog. It's created by me.
ATTENTION: This widget and its coding are solely generated by Ghanshyam Singh. However, anyone can share this widget on his blog until or unless he gives proved credits to Digitalhubinc.com. It’s a warmhearted request from our Team.
