Please enter at least 3 characters.

Add Next/Previous Pager Navigation with Image - Blogger

A simple guide on how to add older previous pager or next prev blog pager in new blogger layout. We also shared stylish version that displays image.
Add Next/Previous Pager Navigation with Image - Blogger

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. 

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:

 

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 🤝🎉🤩

Share this post

Post a Comment