Skip to main content

Use next and previous post titles as navigation in Blogger

By
By default, at the end of each Blogger post, we get the "Newer Post" and "Older Post" navigation links. As I have seen in other sites, it looks better if it showed the next and previous post titles instead. So in this tutorial, I will show you how to customize your post navigation links so that it will display the titles of your next and previous posts.
Default and custom navigationReplace "Newer Posts" and "Older Posts" with post titles.
Before we begin, backup your template first or maybe use a test blog instead. To backup your template, go to your blog's dashboard then Template » Backup/Restore » Download full template.

Step 1. Adding the script.

In this step, we will be adding a script to your template. To add the script, go to Layout then click on "Add a Gadget" and select HTML/JavaScript from the list.
In the Configure HTML/JavaScript window, leave the Title empty and paste the following code in the Content. I based this code on BloggerSentral's version by the way. I modified it so that we can customize the navigation titles a bit more.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>

<script type="text/javascript">
$(document).ready(function(){ 

 var olderLink = $("a.blog-pager-older-link").attr("href");
 $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {
  $(".blog-pager-older-title").text($(this).text());
 });

 var newerLink = $("a.blog-pager-newer-link").attr("href");
 $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {
  $(".blog-pager-newer-title").text($(this).text());
 });

});
</script>
Click Save once you're done.
Paste code in an HTML gadgetPaste the code into an HTML/Javascript gadget.

Step 2. Modifying the template.

Next is to update the template code.
Go to Template » Edit HTML and search for the line <data:newerPageTitle/>and replace it with the following code:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>
Do another search and look for the line <data:olderPageTitle/> and replace it with the following code:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>
TIP: In Blogger's (new) HTML Editor, you can search for a line of code by clicking anywhere inside the text area. Press Ctrl+F then type in your search word in the search box that appears in the upper right corner.
After replacing the lines of code, your template code should be something like this:
Replace the lines of codeReplace <data:newerPageTitle/> and <data:olderPageTitle/> with the new code.
And we're done with the basic setup! Save your template and check your blog whether all is running ok.
With this basic setup, the post title navigation will work on all pages of your blog -- homepage, search results, archive list... Normally, with these type of pages, your navigation should be "Newer Posts" or "Older Posts". So in the next step, we will setup the post title navigation to work only in Item pages (i.e. the post's page itself). But if you still prefer to leave your post title navigation as is, you can just skip Step 3.

Step 3. Using the post title navigation on Item pages only.

Back to the template editor (Template » Edit HTML), search for the code we added earlier for the newer post title link:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>
And replace it with the following:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class="label">&amp;laquo;</span>
  <span class="blog-pager-newer-title"></span>
<b:else/>
  <data:newerPageTitle/>  
</b:if>
Do the same for the code of the older post title link:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>
And replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class="blog-pager-older-title"></span>
  <span class="label">&amp;raquo;</span>
<b:else/>
  <data:olderPageTitle/>  
</b:if>
So now your template code will be something like this:
add a conditional statementUpdate the code so that the post title navigation displays in Item pages only.

Step 4. Using your own navigation labels.

Now if you want to use your own labels instead of the "«" and "»" provided in the code we added earlier, just change the text between the <span class="label"> and </span> tags to whatever you want.
IMPORTANT: When putting in your navigation labels, note that there are special characters such as "<",">","&","'" (and others) that will generate an error in your template if you input them as is. As you may have noticed in the code given earlier, a simple "<" should be written as &amp;lt;. Don't worry though if you are not familiar with this. BloggerSentral has this tool to convert the special characters automatically for you but after the conversion, don't forget to replace all & with &amp; (e.g. &lt; should be written as &amp;lt;).
Some samples:
Customize navigation labelUse your own text for the navigation labels.
And if you followed Step 3, you might also want to customize the labels on the non-Item pages as well.
If you prefer not to use the default "Newer posts" label, search for <data:newerPageTitle/> in your template code and replace it with whatever text your want.
Do the same for the "Older posts" label. Search for <data:olderPageTitle/>and replace it with your own text.
Customize default navigation labels

Comments

Post a Comment

share your thoughts ....

Popular posts from this blog

13 websites to register your free domain

By
Register your Free Domain Now!! 1)  .tk Dot TK is a FREE domain registry for websites on the Internet. It has exactly the same power as other domain extensions, but it’s free! Because it’s free, millions of others have been using .TK domains since 2001 – which makes .TK powerful and very recognizable.  Your website will be like www.yourdomainname.tk . It is free for 1 year. It’s a ccTLD domain whixh having the abbreviation  Tokelau. To create a .tk domain, Visit   www.dot.tk 2) co.cc Co.cc is completely free domain which is mostly used by blogspot bloggers because of it’s easy to use DNS system. Creating a co.cc for blogger is simple ( for instructions- “click here”). Your website will be like www.yourdomainname.co.cc . To create a .co.cc domain, visit www.co.cc 3)   co.nr co.nr is too like co.cc. Your website will be like  www.yourdomainname.co.nr . You can add it for blogger also.. To create a .co.cc domain, vi...
Post a Comment
Read more

How to Put Google Adsense Below Post Title in Blogger?

By
Adsense is used by majority of expert bloggers for their website monetization because it is a cookie based contextual advertising system that shows targeted ads relevant to the content and reader. As bloggers are paid on per click basis, they try various ad placements on the blog to  increase the revenue  and get maximum clicks on the ad units. Well, on some blogs, you might have seen Adsense ad units placed below the post title. Do you know why? It is because the area just below the post title gets the most exposure and is the best place to put AdSense ad units to increase  Click Through Rate (CTR). Even though ads below post title work like a charm but this doesn’t mean that it will work for you as well. If you want to find out the best AdSense ads placement for your blog, try experimenting by placing ads at various locations such as header, sidebar, footer, etc. You can try other  blog monetization methods  as well to effectively monetize y...
Post a Comment
Read more

Exception Handling in Java

By
Exception Handling() it is an event that stops the normal flow of execution of the program and terminates the program abnormally. Exception always occurs at runtime. There Is two type of Exception: Checked Exception.:-The exception which is checked by the compiler at the compilation time. Ex: IOException,ClassNotFoundException. Unchecked Exception: The Exception which Cant be checked by the compiler at the compilation time and directly occurs at runtime is called an unchecked Exception. Ex:NullPointerException,StringIndexOutOfBoundsException. Error: Error is the type of unchecked Exception which occurs due to programmers mistake, end-user input mistake, resource unavailability or network problem etc. OutOfMemoryError StackOverFlowError etc. 5 keywords to handle Exception: try catch finally throw throws possible combination: try-catch try-catch-catch try-catch-finally try finally try-...
Post a Comment
Read more

QWERTY-keyboard when this idean came

By
QWERTY QWERTY   / ˈ k w Éœr t i /  is the most common modern-day  keyboard layout . The name comes from the first six  keys  appearing on the top left letter row of the keyboard and read from left to right: Q-W-E-R-T-Y. The QWERTY design is based on a layout created for the  Sholes and Glidden typewriter  and sold to  Remington  in 1873. It became popular with the success of the Remington No. 2 of 1878, and remains in use on electronic keyboards due to the  network effect  of a standard layout and a belief that  alternatives  fail to provide very significant advantages. [ 1 ]  The use and adoption of the QWERTY keyboard is often viewed as one of the most important case studies in  open standards  because of the widespread, collective adoption and use of the product. [ 2 ] History and purposes [ edit ] Keys are arranged on diagonal columns, to give space for the levers. Main article:  Sh...
Post a Comment
Read more

what is LOREM ipsum and why do designers use it

By
What is Lorem Ipsum? Lorem Ipsum  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now...
Post a Comment
Read more

python program to Print Starting Series OF Indian Mobile Number for a State or operator or both

By
import requests import urllib.request import time from bs4 import BeautifulSoup as bs import re url = ' https://en.wikipedia.org/wiki/Mobile_telephone_numbering_in_India' state_to_extract = "UE" #if set to None all state is considered telecom_to_extracted = None #if set to none all operator from particular city is extracted response = requests . get(url) print (response) soup = bs(response . text, "html.parser" ) one_a_tag = soup . findAll( 'tr' )[ 35 :] lst = [] for k in one_a_tag: s = k . findAll( 'td' ) limit = len (s) i = 0 while True : if i == limit: break no = s[i] . text i += 1 if i == limit: break operator = s[i] . text i += 1 if i == limit: break state = s[i] . text i += 1 if i == limit: break res = f "{no} {operator} {state}" if state_to_extract is None : if telecom_to_extracted is None : lst . append(no) elif telecom_to_e...
2 comments
Read more

Binary to Decimal using Stack in C

By
CODE 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 #include <stdio.h> #include <stdlib.h> #define SIZE 8 int STACK[SIZE],TOP =- 1 ; int power ( int i) { int res = 1 ; while (i -- ) { res = res * 2 ; } return res; } void push ( int n) { if (TOP == SIZE) printf( "OVerflow" ); else STACK[ ++ TOP] = n; } int pop () { if (TOP ==- 1 ) return - 1 ; else return STACK[TOP -- ]; } void main () { int num,i = 0 ,arr[SIZE],j,res = 0 ,temp; printf( "Enter the number" ); scanf( "%d" , & num); printf( " \n Entered number=%d \n " ,num); while (num) { arr[i ++ ] = num % 10 ; num /= 10 ; } for (j = i - 1 ;j >= 0 ;j -- ) push(arr[j]); for (j = 0 ;j < i;j ++ ) { res = res + (pop() * power(j)); } printf( " \n Result=%d" ,res); getchar...
Post a Comment
Read more

Access Your Facebook Account with 3 Passwords

By
Did you know that you can login to your Facebook account using 3 different passwords? Seems interesting isn’t it? Yep! Unlike any other online account which has only one password to access, Facebook lets you log in using 3 different variants of your password. Only a few Facebook users are aware of this fact, but for many others, this might seem a bit surprising. Facebook accepts the following forms of your password: 1. Your Original Password Let me explain this to you with the following example. Assume that your default Facebook password that you created during the sign-up process is: 2. Password with the Case Toggled In the above password the letters ‘F’ and ‘P’ are in uppercase and the remaining are in the lowercase. If you TOGGLE the case where all the UPPERCASE characters are converted into the lowercase and vice versa, your default password “myFacebookPass” would become: Now if you log in using the above toggled password, your Facebook will accept it and welcomes yo...
Post a Comment
Read more

how-to-tell-what-version-of-ubuntu-you-are-running

By
Telling what version of Ubuntu you are running is extremely easy. You would commonly use this command to figure out if you are running Edgy after you upgraded from Dapper. cat /etc/issue Ubuntu edgy (development branch) Note that the version numbers might change over time. I’m running the beta version so that’s what shows up when I run that command. Either way, it should be clear that you are running Edgy.
Post a Comment
Read more