blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

2 ways to rename "older" and "newer posts" to post titles

View demo.


"OLDER" and "NEWER" posts.
a.k.a. blog-pager or default blogger page navigation
usually located at the bottom of the blog post


rename blog pager on blogger


Why rename?
rename older posts and newer posts to post title on blogger

It's more user-friendly. Readers will see right away what the older and newer topics were while scanning through the currently being-read post.
It's more search-engine friendly. The more internal links with appropriate anchor texts your blog has, the better.

change blog pager to post title on blogger


How to rename "OLDER and NEWER posts" to blog post titles.
There are two ways to go about this. Both will require to place a code on the template.

Before we proceed,
1. Backup your template!
2. Go to EDIT HTML page.
3. Press CTRL + F, type in </head> on the search bar.
4. Above it, add this script.

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


NOTE: This script calls for jQuery, a new kind of javascript library. If you already have lightbox on blogger, stylish AJAX contact form, interactive navigation menu or any component that uses jQuery anywhere on your blog, no need to do this step anymore.

add jquery library to blogger

5. SAVE TEMPLATE.

On to the techniques.


Technique #1. Using HTML/JAVASCRIPT gadget.
The code originally came from ETBlue and was tweaked by Greenlava of Blogger Sentral.

1. Go to DESIGN tab. Choose PAGE ELEMENTS.
2. ADD A GADGET. Select HTML/JAVASCRIPT.
3. On the CONFIGURE HTML/JAVASCRIPT window, add this code from Blogger Sentral

<!-- Post title blog pager by BloggerSentral.com START -->
<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>
<!-- Post title blog pager by BloggerSentral.com END -->


4. SAVE.
5. Click SAVE from the PAGE ELEMENTS page as well.

rename blogger navigation from older and newer to post title


Technique #2. Through EXPAND WIDGET TEMPLATES mode.
Use this if you're more comfortable with CSS, coding and editing the template.

1. Go to EDIT HTML Page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, search for #blog-pager.
4. You'll see something like this.

#blog-pager {
   font-size: 140%
}

5. Right after the code, add this:

#blog-pager-newer-link {
font-size:85%;
width:200px;
text-align:left;
} 
#blog-pager-older-link {
font-size:85%;
width:200px;
text-align:right;
} 


You may change width and font-size according to your preference.
customize blog pager on blogger

Press CTRL + F and search for <b:includable id='nextprev'>

6. You'll see something similar to this.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>


what each section means.
<b:if cond='data:newerPageUrl'>code for NEWER post link
<b:if cond='data:olderPageUrl'>code for OLDER post
<a class='home-link' expr:href='data:blog.homepageUrl'> code for HOME

from older post and newer post to post title

7. Below the chunk of lines, add the code

<script type='text/javascript'>
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link:first&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(&quot;&lt;&lt; &quot; + olderLinkTitle);
});

var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h3&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle + &quot; &gt;&gt;&quot;);
});
</script>


8. SAVE TEMPLATE.


Result.
blog pager to post title on blogger


Next tutorial: Move OLDER and NEWER posts on Blogger


Other "Older Posts" and "Newer Posts" Tweaks.
4 ways to hide older posts and newer posts on blogger
5 places to move older and newer posts on blogger


Related Blog and Discussion.
How do I add post title to older and newer post link?
Replace Older & Newer post links with post titles
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 3 Shared Thoughts >>


shatkahon
June 27, 2012 at 8:08 AM

very nice solution. thanks.

Anonymous
February 3, 2013 at 10:32 PM

Hello. And Bye.

Anonymous
April 4, 2013 at 7:28 PM

Hmm is anyone else having problems with the images on this blog
loading? I'm trying to find out if its a problem on my end or if it's the blog.
Any feedback would be greatly appreciated.


my page ... cold sore remedies

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.