Add Next & Previous Post Titles Navigation Widget in Blogger

Placing “Next and Previous Post Titles” Under each post of blogger helps a lot in increasing page views and reducing bounce rate of your blog. Post Titles Navigation is not a new gadget, Many other developers have also shared it already. Some are using JavaScript language, and some others are playing with jQuery codes to achieve it. Just like as those, I’ve also used jQuery to design this plugin but in more neater, better and optimized look than others.
Add Next & Previous Post Titles Navigation Widget in Blogger

Where To Add Next & Previous Post Navigation Widget?

Blogger platform is not optimized and structured in the manner of the user interface. By default, BlogSpot blogs next (Newer) and Previous (Older) pagination buttons appear at the bottom of the page (Just below of the comment box.), which is wholly worthless.

Must Read & Add – 10+ Useful Blogger Widgets For BlogSpot Blogs.

I’ve tried to implement this widget after of comment section on my other blog for ten days, and after that, I’ve placed it to just below of post content. I’ve found putting post navigation gadget just below of post content generating more page views compare to the after of comment box. The widgets become more useful to visitors when they placed to the front of their eyes.

So, today in this article, I’ll teach you to, How you can display next and previous post titles navigation widget under each post just below of the content in your blogger blog. Follow all below instruction carefully;

Note: Before Making any change inside your blogger template code area, download a backup copy.
This is a good habit of every smart blogger.

How To Add Next & Previous Post Titles Widget (Buttons) In Blogger?

To add next & previous post navigation widget (buttons) in blogger, First you have to add codes of this plugin and then replace old newer and older pagination buttons. Follow all steps which are given below to add next & previous post buttons in blogger blogs.

STEP 1] Go to >> Template >> Edit HTML button.

STEP 2] Using CTRL+F Search for </head> tag and just after of this paste below Google Oswald Font stylesheet and jQuery library.

<script src=’’ type=’text/javascript’/>
<link href=’’ rel=’stylesheet’ type=’text/css’/>


Note: If you already have jQuery library inside your blogger template, then kindly remove the bolded code.

STEP 3] Now Search for ]]></b:skin> tag and just above of it paste below CSS code so that our widget stands out.

Next-Previous Post Navigation Customized By
Originally Created By
.mbg-post-navigation { display:inline-block; position:relative; border-top:2px solid #0c6aff!important; border-bottom: 2px solid #111;border-right: 2px solid #111; border-left: 2px solid #0c6aff;  margin-top: 5px;  margin-right:15px; margin-left:22px; overflow:hidden; padding:0px; box-shadow:4px 4px 4px -4px #0c6aff;}
.mbg-post-navigation { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbg-post-navigation a { padding-left: 24px; }
.mbg-post-navigation li.previous { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
.mbg-post-navigation li.previous a { padding-right: 24px;  }
.mbg-post-navigation, .mbg-post-navigation li.previous:hover  {background:#333333; }
.mbg-post-navigation li { width: 50%; display: inline-block; float: left; text-align: center; }
.mbg-post-navigation li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.mbg-post-navigation li i { color: #ccc; font-size: 18px; }
.mbg-post-navigation li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbg-post-navigation li a span { font-size: 15px; color: #111;  font-family:oswald,Helvetica, arial; margin:0px;}
.mbg-post-navigation li a:hover span,
.mbg-post-navigation li a:hover i { color: #ffffff; }
.mbg-post-navigation li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbg-post-navigation i { float: right;
margin-top: 15%;
margin-right: 5%; }
.mbg-post-navigation i, .mbg-post-navigation li.previous i ,
.mbg-post-navigation,  .mbg-post-navigation li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
@media screen and (max-width: 500px){.mbg-post-navigation li { width: 100%;}}

STEP 4] Now, we are going to add HTML code. To do so, search for <data:post.body/> tag and just after of this paste below code.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<ul class=’mbg-post-navigation’>
<li class=’next’>
<b:if cond=’data:newerPageUrl’>
<i class=’fa fa-chevron-right’/><a class=’newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’/>
<i class=’fa fa-chevron-right’/><a><strong>Sorry!</strong> <span>You are viewing Most Recent Post</span></a>
<li class=’previous’>
<b:if cond=’data:olderPageUrl’>
<i class=’fa fa-chevron-left’/><a class=’older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’/>
<i class=’fa fa-chevron-left’/><a><strong>Sorry!</strong> <span>You are viewing Last Post</span></a>
<script type=’text/javascript’>
var newerLink = $(‘a.newer-link’);
var olderLink = $(‘a.older-link’);
$.get(newerLink.attr(‘href’), function (data) {
newerLink.html(‘<strong>Next Post</strong> <span>’+$(data).find(‘.post-title’).text()+'</span>’);
$.get(olderLink.attr(‘href’), function (data2) {
olderLink.html(‘<strong>Previous Post</strong> <span>’+$(data2).find(‘.post-title’).text()+'</span>’);

STEP 5] Now save your template.

You’re almost done. Now you’ve to preventing default newer and older links from your blogger template. Learn how to do so?

Removing Default Newer And Older Links

STEP 1] Again search for <b:includable id=’nextprev’> tag. You’ll see a big code just after of it which looks similar to the below code.

<div class=’blog-pager’ id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<span id=’blog-pager-newer-link’>
<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
<b:if cond=’data:olderPageUrl’>
<span id=’blog-pager-older-link’>
<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
<b:if cond=’data:mobileLinkUrl’>
<div class=’blog-mobile-link’>
<a expr:href=’data:mobileLinkUrl’><data:mobileLinkMsg/></a>
<div class=’clear’/>

STEP 2] Now, You’ve to enclose this code under conditional tags just like below.

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

STEP 3] Now, again click on save template button.

That’s it. You’re all done.

You Also Love To Read;

Magnetic & Powerful Trick To Increase Organic Traffic To A New Blog?
How To Build High Quality Backlinks For Your Blog?

Original Source – MyBloggerTricks


So above guide is about “How To Add Next & Previous Post Titles Navigation Widget Below Each Post in Blogger?” I’ve tried my best to make this tutorial as easy as possible. But if in any case you’re facing any trouble, then let me know. I’ll be happy to assist you.

Did you like this widget? If yes, then don’t forget to share it with your friends.

You can also subscribe us using your email ID, If you want to get daily updates direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!

Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: