--> Show Next & Previous Post Titles in Blogger with jQuery Navigation | Experience Lab - Online business creation and development guide for bloggers and startups

Show Next & Previous Post Titles in Blogger with jQuery Navigation

You can see that we have replaced Older/Newer Pagination buttons with Post titles. This trick is not a new one and already many developers ...

jquery pager navigation in bloggerYou can see that we have replaced Older/Newer Pagination buttons with Post titles. This trick is not a new one and already many developers proposed different solutions using JavaScript or using jQuery. We will also use jQuery but in a more neater and optimized fashion using jquery to fetch URL parameters instead of running long js queries. Blogger blogs are neither optimized nor structured in a user friendly manner. Same applies to default wordpress themes. The pagination buttons make no sense when placed at the bottom of comments container. Anything that provides usability to readers should be placed straight in front of eyes and not pushed down to the page where one would rarely scroll. After checking our analytics stats, I found that Next/Previous buttons placed just at the bottom of post body generates more pageviews compared to placing them down below comments section. They become even more useful if instead of showing just buttons pointing to succeeding or preceding posts, show your readers the blog post titles. We will learn today how to create this professional looking pager navigation in blogspot blogs.

Next Previous buttons

Add it to blogger

First we will add the necessary code for the new pagination and then we will remove the existing default buttons that appear below comment section

  1. Go To Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Search for ]]></b:skin> and paste the following CSS code just above it:


/*################MBT Pager ##########################*/

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }

.mbt-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
.mbt-pager li.previous a { padding-right: 24px;  }

.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.mbt-pager li i { color: #ccc; font-size: 18px; }

.mbt-pager 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;}

.mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }

.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next,  .mbt-pager 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;}

  • To change the black background and white font color of the selected area on mouse hover edit: background:#333333;    and for font color edit: color: #ffffff;
  • To change the height of the containers edit height:114px; twice
  • Use our Color generator tool for picking the hexadecimal color code

   5. Now we will add some fancy Google web font called Oswald, so that our widget stands out. Kindly search for <head> and just below it paste the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Note: Remove the bolded code if you have already added jquery library inside your template.

     6. Next we will add the HTML code that will position the pager at the bottom of last paragraph on the blog post. Search for <data:post.body/>

     7. Just below it paste the following HTML code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

<ul class='mbt-pager'>

        <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>Next</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>Previous</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</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   


Here I used a bit of jquery to fetch the data inside title tags. Since blogger only provides the option to switch between next and previous posts using URLs, therefore we needed jQuery to find the title classes using the heading tags and retrieve the data out of them. The title classes and heading tags may be different for custom blogger templates (you may need my help here by posting your blog urls so that I could tell you the correct title class used inside your blog)

In standard blogger templates the correct class is: .post h3.post-title   and therefore I will be using the same inside the jquery code above.

  • (Optional) The yellow and orange highlighted text can be replaced with any text you like. They will appear when a user is either viewing the most recent post or the last post on the blog.

8. Save your template and you are almost done! Visit your blogs and you will see the pager navigation working just perfectly! :)

Removing existing Next/Previous buttons

Now its time to prevent the default buttons from displaying below comment sections.

  1. Search for  <b:includable id='nextprev'>  
  2. You will see a big chunk of code below it that looks slightly similar to the code below:

<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'/>

  3. All that you need to do is to enclose this code inside conditional codes as shown below:

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



    4. Save your template and you are all done!

Now the default buttons will appear on homepage but not inside posts or static pages. If you wish to permanently delete them, then simply delete the big chunk code above and save your template.

Need Help?

  • If you are looking for free professional set of png buttons for next/previous buttons then check our gallery: MBT Download Zone

I hope this new widget adds a new life to your blogger templates. It is extremely unique in design and rarely used. So be amongst the first to take your blogs to the next level. As always I am here for any help needed. Peace and blessings buddies :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Show Next & Previous Post Titles in Blogger with jQuery Navigation
Show Next & Previous Post Titles in Blogger with jQuery Navigation
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy