Using Post Titles instead of Blogger Blog Pager.

Although we can customize the Blogger page by changing their Tex,Font,Color etc. we can too switch its sides.Today we will replace that Blogger pager called Newer post and older post as WordPress Style i.e changing them to Post title instead of Older post or Newer post.

Before Replacing with Post Titles

After replacing with post Titles

Lets add it.

Adding JavaScript Code.

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back up your Template.
3. Find </body> tag and instert the following code just above it.

<script type='text/javascript'>
//<![CDATA[
$(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>

4. Click on Save Template.
   Now go to your blog one post .When the page fully loads go to bottom of post and see pager if it works then its ok but if it doesn’t then We need to add JQuery code.Lets read more.

Adding JQuery Code.

1. Go to Edit HTML again.
2. Find </head> tag and insert the code just above it.

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

3. Click on Save Template.
   Now visit your blog you must find working perfectly.

Styling the Blog Pager.

Sometimes due to more words on post Title you may face problem in that condition add this CSS.

#blog-pager-newer-link  {
font-size:85%;
width:220px;
background:#fafafa;
} 

#blog-pager-older-link {
font-size:85%;
width:220px;
background:#fafafa;
} 

To add CSS just add after line 3 or after line 9.Change width that suits your Taste.If you don’t know how to add CSS then refer here.You can change #fafafa   to six digit color code.To get color code refer here.

Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.