We Left Blogger, Want To Know WHY? Read EXEIdeas On WordPress...

How To Add Post Titles With Older & Newer Post Links?

How To Add Post Titles With Older & Newer Post Links?

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.

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 == &quot;item&quot;'>
<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="http://'+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("&lt;&lt; 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 &gt;&gt;<br />"+b)},500)});
//]]>
</script>
</b:if>


Customization:

1.) You Can Chnage <style> Data If You Know CSS.
2.) Save And Done...

You Like It, Please Share This Recipe With Your Friends Using...

14 Responses to “How To Add Post Titles With Older & Newer Post Links?”

  1. Nirmala says:

    Good idea, thanks for sharing. Gonna try it now.

  2. Ranjit says:

    thanks for sharing this.good Technic…………

  3. Revati says:

    thanks friend for shearing this widget…………

  4. I do facing some problem with this tutorial,send you a mail with problem details hope you’ll fix it.advance thnx bro.

  5. vishnu kumar says:

    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

  6. Brooklyn Plumbers says:

    Nice technique share with us. Thanks.

  7. Mohammad Yaseen M.Y.B says:

    oh thanks buddy i was in search of that, thanks alot.

Leave a Reply