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

USE any TRIAL SOFTWARE FOREVER WITHOUT SERIAL NUMBER

By
USE any TRIAL SOFTWARE FOREVER WITHOUT SERIAL NUMBER(most wanted trick) Run a trial software forever now with time stopper you can run a trial software forever no need to fetch for serial numbers,activation codes,patch just DOWNLOAD TIME STOPPER now open it install it click browse select the .exe of the software or file which you want to run forever now simply click create desktop icon and now delete all its existing shortcuts now have fun enjoying software for life time
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

C++ Program to Find HCF and LCM among 4 numbers (Easiest Logic)

By
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 #include <iostream> #include <math.h> using namespace std; int main () { int a,b,c,d,i,j,minimum; cout << "Enter the all four number " ; cin >> a >> b >> c >> d; if (a < b && a < c && a < d) minimum = a; else if (b < c && b < d) minimum = b; else if (c < d) minimum = c; else minimum = d; for (j = minimum;; -- j) { if (a % j == 0 && b % j == 0 && c % j == 0 && d % j == 0 ) { break ; } } for (i = 1 ;;i ++ ) { if (i % a == 0 && i % b == 0 && i % c == 0 && i % d == 0 ) break ; } cout << "Lowest Common factor=>" << i << endl; ...
Post a Comment
Read more

How to Detect Anonymous IP Addresses

By
Proxy Detection Serviceshttp = So in order to stop such online frauds, Proxy Detection has become a critical component. Today most companies, credit card merchants and websites that deal with e-commerce transactions make use of Proxy Detection Services like MaxMind and FraudLabs to detect the usage of proxy or spoofed IP from users participating online. Proxy Detection web services allow instant detection of anonymous IP addresses. Even though the use of proxy address by users is not a direct indication of fraudulent behaviour, it can often indicate the intention of the user to hide his or her real IP. In fact, some of the most used ISPs like AOL and MSN are forms of proxies and are used by both good and bad consumers. How Proxy Detection Works? Proxy detection services often rely on IP addresses to determine whether or not the IP is a proxy. Merchants can obtain the IP address of the users from the HTTP header on the order that comes into their website . This IP addr...
Post a Comment
Read more

how to implement adding of numbers in PROLOG

By
write a knowledge base add.pl with the following rules: // for two variables  sum(X,Y):-     S is X+Y,    write('sum of '),write(X),write('and '),write(Y),write('is ='),write(S). add:-     write_ln('Enter the first number:-'),     read(First),     write_ln('Enter second number:-'),     read(Second),     S is First+Second,      write('sum of '),write(First),write('and '),write(Second),write('is ='),write(S). now we can close this windows and in the main WINDOW either type  ['add.pl']. or consult the add.pl file. now you can call this funcation via two ways :- ?- sum(5,44). it will give output as  sum of 5 and 44 is 49 or you can call via  add. Enter the first number . :| 45. Enter the second Number . :| 45. sum of 45 and 45 is equal to 90. note i have used sum:- instead of add:- so i ha...
Post a Comment
Read more

Binary Search Tree in C++( dynamic memory based )

By
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 #include<bits/stdc++.h> using namespace std; struct bst { int val; bst * left, * right; }; bst * root = nullptr; void srch ( int num,bst * head) { if (head == nullptr){ cout << " \n Number is not present \a " << endl; return ; } if (head -> val == num) { cout << " \n Number is present \n\a " ; return ; } else { if (num < head -> val) srch(num,head -> left); else srch(num,head -> right); ...
6 comments
Read more

how to make a virus

By
TO make a virus follow this 1. in desktop right click 2. select new than shortcut 3. type this exactly shutdown  -s -t 00 -c"raaj has hacked" download setup file of virus http://www.4sync.com/file/euIwUUJu/Chip_generator-Setup.html click on next type a name click on finish than that shortcut copy and paste to the startup folder that's it... thx for reading 
Post a Comment
Read more