Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Monday, April 15, 2013

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

This Article Was Live On: Monday, April 15, 2013 And Till Now Have14 comments.
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 Article Using...




Don't Forget To Read This Also...



14 comments :

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

    ReplyDelete
    Replies
    1. You Are Welcome, Share Your Experience With Us...

      Delete
  2. thanks for sharing this.good Technic............

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us, Be With Us To Get More...

      Delete
  3. thanks friend for shearing this widget............

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

    ReplyDelete
  5. 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

    ReplyDelete
    Replies
    1. You Are Welcome...
      DEMO Screen Shoot In In The One And Only Above Image, Have A Look On It.

      Delete
  6. Nice technique share with us. Thanks.

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

    ReplyDelete
    Replies
    1. You Are Welcome Here And Thanks For Liking Our Code...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.