In Blogger many hacks are developed, many of them are created with unique ideas and some of them are adopted from WordPress. This hack is adopted from WordPress, when you see a WordPress blog in post section (single page) you will see blog pager in the bottom of post and the Newer Post, Home and Older Post links are located at the bottom of your blog. They are parts of blog pager, which help readers navigate between pages and posts.
Blogger you will see older post and newer post in blog pager instead of their titles, with this hack you can add older post and newer post with actual post title. With this hack you can increase interest of your blog users because post title are more relevant from older post and newer post links as well but due to only older post link, visitor did not click on the link to see more because they have no extra time to spent, but as this hack visitor can get confirmed that he is not going to loose his time on irrevalent post as he see the title of intrest.
It is also best for your SEO that your visitor will be busy in your blog thriugh viewing older post, you will get views, increase time on your site, can also reduce your site’s bounce rate.The original script provided by YABTB.
Table of Contents
Features:
1.) Add Your Post Title With OlderPost, NewerPost Link.
2.) 100% Same As WordPress.
3.) Single JQuery File That Will Load Fast.
4.) Fully Customizable In Easy Steps.
5.) Better For SEO.
6.) Increase Your Pageviews.
7.) Decrease Your Bounce Rate.
8.) JQuery 1.7.2 Added, Don’t Add If You Already Have.
9.) CSS Code Added To Allow Customization.
10.) Only Display On Post Pages.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<b:if cond='data:blog.pageType == "item"'>
<style>
#blog-pager-newer-link{font-size:90%;width:200px;text-align:left;padding:5px}
#blog-pager-older-link{font-size:90%;width:200px;text-align:right;padding:5px}
.blog-pager-newer-link,.blog-pager-older-link{background-color:transparent!important;padding:0!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var urlToNavTitle={};function getTitlesForNav(e){for(var c=0;c<e.feed.entry.length;c++){for(var a=e.feed.entry[c],d="",b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){d=a.link[b].href;break}""!=d&&(urlToNavTitle[d]=a.title.$t)}};
document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(a){if(a=a.match(//([^/_]+)(_.*)?.html/))a=a[1].replace(/-/g," "),a=a[0].toUpperCase()+a.slice(1),28<a.length&&(a=a.replace(/ [^ ]+$/,"..."));return a}
$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];b||(b=urlToPseudoTitle(a));b&&$("a.blog-pager-newer-link").html("<< Newer Post<br />"+b)}if(a=$("a.blog-pager-older-link").attr("href"))(b=urlToNavTitle[a])||(b=urlToPseudoTitle(a)),b&&$("a.blog-pager-older-link").html("Older Post >><br />"+b)},500)});
//]]>
</script>
</b:if>
Customization:
1.) You Can Chnage <style> Data If You Know CSS.
2.) Save And Done…
Good idea, thanks for sharing. Gonna try it now.
You Are Welcome, Share Your Experience With Us…
thanks for sharing this.good Technic…………
You Are Welcome To Visit Us, Be With Us To Get More…
thanks friend for shearing this widget…………
You Are Welcome…
Thank you buddy!
will you upload the screenshot that how it exactly looks alike after adding this code.
Pls, it will be more helpful for me
You Are Welcome…
DEMO Screen Shoot In In The One And Only Above Image, Have A Look On It.
I do facing some problem with this tutorial,send you a mail with problem details hope you’ll fix it.advance thnx bro.
Check Out Our Reply…
Nice technique share with us. Thanks.
You Are Welcome Here…
oh thanks buddy i was in search of that, thanks alot.
You Are Welcome Here And Thanks For Liking Our Code…