Add Next/Previous Pager Navigation with Image - Blogger

By default, Blogger allows you to add newer/older links in posts, simply known as next and previous pager navigation. Older link and Newer link texts are visible and help visitors navigate through posts. However, because of modifications in code by designers, for some templates, the post titles are even missing in blog pager.

I faced the same issue while adding this feature to my fletro pro theme. Only the Older post/ Newer post texts were shown. I tried adding <data:newerPageTitle/> and <data:olderPageTitle/> to display newer post title and older respectively. But no success. I looked up on ways to show post title and came up with a solution. Later, I felt adding images by their side will make my page more vibrant.

So, today I am going to share step by step guide on how you can also add post title along with image in newer older post widget and as a bonus, I will share my redesigned previous/next navigation style. Objectives are:

1) Adding Post Title

2) Retrieving image for next and previous blogger articles

Before that, add following code to your theme. This code displays blog pager navigation in your website. Add in to the location you want to display next/previous widget.

<div class='navigation-wrap'>
      <b:if cond='data:newerPageUrl'>
         <a class='blog-pager-newer-link navigation-next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
      </b:if>
      <b:if cond='data:olderPageUrl'>
         <a class='blog-pager-older-link navigation-prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
      </b:if>
   </div>

As you can notice there is no text whatsoever. Lets customize:

1) Adding Post Title in Next/Previous Pager Navigation without Image

After looking upon on why post titles are missing, I landed on Nkuri's blog and found a quick fix using Pure JS.

Display Post Titles in Blogger Page Navigation

nkurilog.blogspot.com

Below is pure JavaScript that extract post title and append it to next and previous links.

This is the code that displays only blog pager post title but no image. Go to another section if you want to display image in older/newer pager.

Search for </body> and paste the following code above it.

<b:if cond='data:view.isPost'>
<script> /*<![CDATA[*/
// Code Shared by TwistBlogg.com
// except root, labels and search pages
   if (/.+\.html(\?m=1)?$/.test(location.href)) {
      var olderLink = document.getElementById('Blog1_blog-pager-older-link');
      if (olderLink) {
         getPageTitle(olderLink, setOlderPageTitle);

         function setOlderPageTitle(data) {
            setPageTitle(data, olderLink, '')
         };
      }
      var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
      if (newerLink) {
         getPageTitle(newerLink, setNewerPageTitle);

         function setNewerPageTitle(data) {
            setPageTitle2(data, newerLink, '')
         };
      }

      function setPageTitle(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Older post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function setPageTitle2(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Newer post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function getPageTitle(pageLink, callback) {
         var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
         var script = document.createElement('script');
         script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + pathname + '&callback=' + callback.name + '';
         document.body.appendChild(script);
      }
   } /*]]>*/ </script>
</b:if>

The above code should display you the post titles on next/prev pagination.

Adding Post Title in Next/Previous Pager Navigation

If you want to learn how the code is working, refer to this Japanese blog:

Build your own BloggerTheme: Implement pagination in Blogger with JavaScript

Bloggerのページネーションは、次の記事、前の記事だけで、記事タイトルを取得してくれない。javaScriptで記事タイトルを取得して表示するコードを記載

thmertial.blogspot.com

2) Adding Post Title in Next/Previous Pager Navigation with Image

It took me a good amount of time figuring ways to display image on newer/older pager. But it was simple. Blogger stores media thumbnail in media$thumbnail.url . All I need to do was fetch the correct URL. So, I passed separate links and retrieve the thumbnails.

However, media$thumbnail.url outputs image of resolution 72x72 pixels. So, it was blurry. I fixed that by replacing s72 to s300. However, with new blogger image domains https://blogger.googleusercontent.com, some images were not visible when replacing those numbers. A quick fix was replacing new and old image links.

.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") did the work for me.

To see it live, paste the following code just above </body> tag.

<b:if cond='data:view.isPost'>
<script> /*<![CDATA[*/
// Code Shared by TwistBlogg.com
// except root, labels and search pages
   if (/.+\.html(\?m=1)?$/.test(location.href)) {
      var olderLink = document.getElementById('Blog1_blog-pager-older-link');
      if (olderLink) {
         getPageTitle(olderLink, setOlderPageTitle);

         function setOlderPageTitle(data) {
            setPageTitle(data, olderLink, '')
         };
      }
      var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
      if (newerLink) {
         getPageTitle(newerLink, setNewerPageTitle);

         function setNewerPageTitle(data) {
            setPageTitle2(data, newerLink, '')
         };
      }

      function setPageTitle(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Older post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div><div class='navigation-image'><img alt='" + olderLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div>";
         }
      }

      function setPageTitle2(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-image'><img alt='" + newerLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div><div class='navigation-content'><small>Newer post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function getPageTitle(pageLink, callback) {
         var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
         var script = document.createElement('script');
         script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + pathname + '&callback=' + callback.name + '';
         document.body.appendChild(script);
      }
   } /*]]>*/ </script>
</b:if>

The above code should display you the post titles with images on next/prev pagination.

Adding Post Title in Next/Previous Pager Navigation with Image

BONUS - Customizing Blog Newer/Older Pager

As promised earlier, I am going to share the CSS code to customize next/prev blog navigation pager and make it creative and beautiful.

Add following code before </head> tag in your theme.

<b:if cond='data:view.isPost'>
<style>
.navigation-wrap {
	flex-wrap: wrap;
	padding: 4vh 0;
	border-top: 1px solid #d9d9d8;
	border-bottom: 1px solid #d9d9d8;
	margin-top: 100px;
}

.navigation-wrap,
.navigation-wrap a {
	display: flex
}

.navigation-content {
	line-height: 0;
	display: inline-block;
	width: 100%;
	padding: 1vh 0
}

.navigation-wrap a {
	flex: 0 0 50%;
	box-sizing: border-box;
	max-width: 640px;
	min-height: 160px;
	pointer-events: none;
	color: inherit;
}

.navigation-wrap a:first-child:last-child {
	flex-grow: 1
}

.navigation-next {
	padding-right: 2vw;
}

.navigation-prev {
	margin-left: auto;
	padding-left: 2vh;
	text-align: right
}

.navigation-wrap small {
	font-family: 'Inter', sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	display: inline-block;
	margin: 2vh 0 1vh
}

.navigation-next small {
	padding-right: .6vw
}

.navigation-prev small {
	padding-left: .6vw
}

.navigation-wrap h3 {
	font-family: 'Inter', sans-serif;
	font-size: 2.8rem;
	font-weight: 700;
	display: inline;
	margin: 5px 0;
	pointer-events: auto;
	line-height: 1.3;
}

.navigation-wrap h3:hover {
	text-decoration: underline
}

.navigation-image {
	line-height: 0;
	position: relative;
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
	pointer-events: auto
}

.navigation-image img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    border-radius:26px;
}

.navigation-next .navigation-image {
	margin-right: 1.8vw
}

.navigation-prev .navigation-image {
	margin-left: 1.8vw
}

@media (max-width:1280px) {
	.navigation-wrap small {
		margin-top: 1.5vh
	}

	.navigation-wrap h3 {
		font-size: 2.4rem
	}

	.navigation-image {
		width: 140px;
		height: 140px
	}
}

@media (max-width:1024px) {
	.navigation-wrap a {
		min-height: 100px
	}

	.navigation-wrap small {
		margin-top: 0
	}

	.navigation-wrap h3 {
		font-size: 2.2rem
	}

	.navigation-image {
		width: 100px;
		height: 100px
	}

	.navigation-next .navigation-image {
		margin-right: 2.4vw
	}

	.navigation-prev .navigation-image {
		margin-left: 2.4vw
	}
}

@media (max-width:768px) {
	.navigation-wrap a {
		flex-basis: 100%
	}

	.navigation-wrap a+a {
		margin-top: 4vh
	}
}

@media (max-width:480px) {
	.navigation-wrap a {
		min-height: 80px
	}

	.navigation-wrap small {
		font-size: 1.2rem
	}

	.navigation-wrap h3 {
		font-size: 1.8rem
	}

	.navigation-image {
		width: 80px;
		height: 80px
	}
}
</style>
</b:if>

That is all. You have successfully added creative next/previous pager navigation with image in blogger. Feel free to share and leave a comment below. Happy Blogging 🤝🎉🤩

10 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

To insert an image, add [img]image_link[/img]
To insert a block of code, add [pre]parsed_code[/pre]
To insert a link, add [link=your_link]link_text[/link]
To insert a quote, add [quote]quote_text[/quote]
To insert a code, add [code]parsed_code[/code]

Anonymous 6/21/2023 02:13:00 AM 6/21/2023 02:13:00 AM

is there any one i will get this theme, by any chance.
1. Aman Bhattarai 6/21/2023 11:33:00 PM 6/21/2023 11:33:00 PM
  
  Sorry I do not have any plans to share it for now :) I can help you build one though.
Anonymous 6/20/2023 12:24:00 AM 6/20/2023 12:24:00 AM

hello, which theme you use, can you provide me ?please or atleast theme name
1. Aman Bhattarai 6/21/2023 12:13:00 AM 6/21/2023 12:13:00 AM
  
  Hey, It is a custom theme designed by us.
Anonymous 3/01/2023 08:30:00 AM 3/01/2023 08:30:00 AM

not working, also add scrolling bar to your blog is annoying to scroll till the end of every page
1. Aman Bhattarai 3/04/2023 10:57:00 PM 3/04/2023 10:57:00 PM
  
  I am sure there is scroll button, its just thin :) Sorry for inconvenience 😌
Dipo Dwijaya S 2/07/2023 10:10:00 PM 2/07/2023 10:10:00 PM

Thank you for wonderful trick. I really learn a lot :-)
1. Aman Bhattarai 2/09/2023 02:30:00 PM 2/09/2023 02:30:00 PM
  
  Glad you loved the article :)
2. Dipo Dwijaya S 3/08/2023 09:55:00 PM 3/08/2023 09:55:00 PM
  
  Hi! I'm back again.
  I have a little suggestion for the codes.
  For tag alt image, I use data.feed.entry[0].title.$t instead newerLink and olderLink. Thus, more optimized for search engine's robots.
  Fot tag title image, you can do the same thing, just change alt to title.
  I wish I could show the screenshot here, but if you please you can see at my blog: blendids.blogspot.com, the go to inspect element for more insight.
  (Please excuse my English because its not my native)
3. Aman Bhattarai 3/09/2023 09:45:00 PM 3/09/2023 09:45:00 PM
  
  Hey, good analysis. Thanks for the update.
  Yes, you can use data.feed.entry[0].title.$t as alt and title tags for images. That way it is optimized for SEO crawlers.
  
  You can post screenshots online and share links, that way it might be helpful for other users.
  
  Happy Blogging 😀

TwistBlogg

Add Next/Previous Pager Navigation with Image - Blogger

1) Adding Post Title in Next/Previous Pager Navigation without Image

2) Adding Post Title in Next/Previous Pager Navigation with Image

BONUS - Customizing Blog Newer/Older Pager

10 comments

Comment Shortcodes

TwistBlogg

Social Links

Pages

Labels

Resources