How to replace "Newer Post / Older Post" with Post Title in Blogger

Posted On // Leave a Comment
    Most of the blogs will have Older Posts or Newer Posts after the article or in the footer section.

  You can replace it with post titles by following some simple steps.


1)  Sign in to your Blogger Dashboard.

2) Click on the blog you want to change ( In case you have more than one blog )

3) Click on template.

4) Take a back up of the template and then proceed.

5) Now click "edit HTML" and proceed.

6) Find </head> ( Use CTRL+F )

7) Paste the code given below in the box above </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
8) Save the Template.

9) Now go to the Layout.

10) Click " add gadget " and click " HTML/Javascript "

11) Now copy the code below and paste it in the gadget and save it.


<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>
12) Now you will see the Post title instead of Older and newer post as shown below in the screenshot.


                Hope you like this how-to guide. Meet you with another post. 

0 comments:

Post a Comment