Skip to main content

Use next and previous post titles as navigation in Blogger

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

Popular posts from this blog

20 Windows Keyboard Shortcuts You Might Not Know

Global Windows Shortcuts Win+1, 2, 3, 4, etc. will launch each program in your taskbar. It is helpful then to keep your most used programs at the beginning of your task bar so you can open them one right after another. This also works in Windows Vista for the quick launch icons. Win+Alt+1, 2, 3, etc. will open the jump list for each program in the taskbar. You can then use your arrows to select which jump list option you want to open. Win+T will cycle through taskbar programs. This is similar to just hovering over the item with your mouse but you can launch the program with Space or Enter. Win+Home minimizes all programs except current the window. This is similar to the Aero shake and can be disabled with the same registry key. Win+B selects the system tray which isn’t always useful but can come in very handy if your mouse stops working. Win+Up/Down maximizes and restores down the current window so long as that window has the option to be maximized. It is exactly t...

what is LOREM ipsum and why do designers use it

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...

Streamlining Java Web Application Deployment with React WAR Generator

In the ever-evolving world of web development, managing builds and deployments can often be cumbersome and error-prone. Today, we're excited to introduce a tool designed to simplify and streamline this process: the React WAR Generator . What is the React WAR Generator? The React WAR Generator is a Python-based tool that automates the creation of WAR (Web Application Archive) files for Java web applications. It caters specifically to frontend projects built with React or similar frameworks, making it easier to package and deploy your web applications to a Tomcat server. Key Features Profile-Based Builds : With support for multiple profiles ( dev , test , prod , default ), you can build your application according to different environments and configurations. Version File Generation : Optionally generate a version file that integrates versioning information directly into your TypeScript files, ensuring your build versions are always up-to-date. Tomcat Deployment : Simplify your deploy...

How to Put Google Adsense Below Post Title in Blogger?

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...

Java API call Example using GSON, org.json.json and Jackson [ Simple Get Call] and parsing result as JSON

import com.fasterxml.jackson.databind.JsonNode ; import com.fasterxml.jackson.databind.ObjectMapper ; import com.google.gson.* ; import org.json.JSONArray ; import org.json.JSONObject ; import java.io.* ; import java.net.HttpURLConnection ; import java.net.URL ; public class APICALL { public static void main (String[] args) throws IOException { // String url="https://mocki.io/v1/19a50724-c2e5-46a1-b457-543462cdfde2"; String url= "https://jsonplaceholder.typicode.com/users" ; String line ; StringBuilder resp= new StringBuilder() ; System. out .println(url) ; HttpURLConnection con= (HttpURLConnection) new URL(url).openConnection() ; con.setRequestMethod( "GET" ) ; con.setRequestProperty( "Accept" , "application/json" ) ; System. out .println(con.getResponseMessage()) ; System. out .println(con.getContentType()) ; InputStream inputStream=con.getInput...

remove virus without antivirus

want  to remove virus without antivirus here it is Start->Run->type cmd in each drive type attrib /s /d it will display the list of all files in that drive along with folders.concntrate on files having SHR attribute.normally virus files have two characteristics 1.SHR attribute 2.Queer name like amvo.exe,r6r.exe,autorun.inf etc. Noteme system files also have this attribute like MSDOS.SYS,IO.SYS etc so before deleting googling about that file will help. to delete these files type c:\>del /f /s /a >> to view the content of files with .inf,.vbs,.c etc i.e files which r not batch files or executables.goto explorer n then goto the required drive or folder n type the filename with extension it wil open up in notepad. >>there is another method also.goto the required location n type attrib -s -h -r filename then use gui to see that hiiden file.if it is not n exe or .bat or then open it with notepad.Here you will get some information like a file na...

Creating an Executable Jar File

Creating a jar File in  Eclipse In  Eclipse  Help contents, expand "Java development user guide" ==> "Tasks" ==> "Creating JAR files."  Follow the instructions for "Creating a new JAR file" or "Creating a new runnable JAR file."The  JAR File  and  Runnable JAR File  commands are for some reason located under the  File menu: click on  Export...  and expand the  Java  node. Creating a jar File in  JCreator You can configure a "tool" that will automate the jar creation process.  You only need to do it once. Click on  Configure/Options . Click on  Tools  in the left column. Click  New , and choose  Create Jar file . Click on the newly created entry  Create Jar File  in the left column under  Tools . Edit the middle line labeled  Arguments:  it should have cvfm $[PrjName].jar manifest.txt *.class Click OK. Now set...

keyboard-shortcuts-that-work-in-all-web-browsers

Each major web browser shares a large number of keyboard shortcuts in common. Whether you’re using Mozilla Firefox, Google Chrome, Internet Explorer, Apple Safari, or Opera – these keyboard shortcuts will work in your browser. Each browser also has some of its own, browser-specific shortcuts, but learning the ones they have in common will serve you well as you switch between different browsers and computers. This list includes a few mouse actions, too. Tabs Ctrl+1-8 – Switch to the specified tab, counting from the left. Ctrl+9 – Switch to the last tab. Ctrl+Tab – Switch to the next tab – in other words, the tab on the right. (Ctrl+Page Up also works, but not in Internet Explorer.) Ctrl+Shift+Tab – Switch to the previous tab – in other words, the tab on the left. (Ctrl+Page Down also works, but not in Internet Explorer.) Ctrl+W, Ctrl+F4 – Close the current tab. Ctrl+Shift+T – Reopen the last closed tab. Ctrl+T – Open a new tab. Ctrl+N – Open a new browser window....

Samsung mobile cheat codes

* Software version: *#9999# * IMEI number: *#06# * Serial number: *#0001# * Battery status- Memory capacity : *#9998*246# * Debug screen: *#9998*324# – *#8999*324# * LCD kontrast: *#9998*523# * Vibration test: *#9998*842# – *#8999*842# * Alarm beeper – Ringtone test : *#9998*289# – *#8999*289# * Smiley: *#9125# * Software version: *#0837# * Display contrast: *#0523# – *#8999*523# * Battery info: *#0228# or *#8999*228# * Display storage capacity: *#8999*636# * Display SIM card information: *#8999*778# * Show date and alarm clock: *#8999*782# * The display during warning: *#8999*786# * Samsung hardware version: *#8999*837# * Show network information: *#8999*638# * Display received channel number and received intensity: *#8999*9266# * *#1111# S/W Version * *#1234# Firmware Version * *#2222# H/W Version * *#8999*8376263# All Versions Together * *#8999*8378# Test Menu * *#4777*8665# GPSR Tool * *#8999*523# LCD Brightness * *#8999*377# Error LOG Menu *...

C program to find whether two Strings are cyclic Anagram or not

Example 1.first String: abcd  second string:dabc  output:They are cyclic anagram 2.  first String: abcd  second string:dcab output:They are not  cyclic anagram 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 53 54 55 56 57 58 59 60 61 62 63 # include # include int main() { char s[ 100 ], b[ 100 ], temp; int n, len, i; printf( "Enter the String \n " ); scanf( "%s" , s); printf( " \n Entered String=%s" , s); printf( " \n Enter String to be matched->" ); scanf( "%s" , b); printf( " \n Entered String to be matched->%s" , b); len = strlen(s); if (len != strlen(b)) { printf( " \n they are not cyclic anagram \n " ); getchar(); return 0 ; } ...