Blogger Navigation with Post Title

In my blog I've discussed how to customize blogger newer-post and older-post navigation. Today I'll show you how to display post titles with these navigation links. It actually looks good to display blog post titles instead of showing just page navigation buttons.The basic concept behind this trick is simple. We'll use jQuery .get() function to display titles with these links. jQuery introduced this function to load data from the server using a HTTP GET request. Since blogger does not have proper data tag that can load title of previous page or next page, we'll use this jQuery function to load data from the server. I'ill also show you some stylish appearance of post titles with these navigations. However if you know a little bit of css, you can easily customize your blogger appearance.

Before you make any changes in your blogger template, it is recommended to backup your blog if anything goes wrong. Moreover do it at your own risk. Bloganalyzer is not responsible if anything bad happens.

Login to your Blogger account, go to Blogger dashboard and select 'Template' from the dropdown menu by clicking the arrow adjacent to 'Go to post list icon'. You can also select the 'Template' from left navigation menu.
Click 'Edit HTML'.
Check jQuery library is already included in your blog or not. If not, search for (Ctrl+F) <head> and write down the following line just after <head>.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>

Now select one of these following styles and apply the associated code.

Style #1

Screenshot

Source

Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>.

/*-- Bloganalyzer navigation style #1 --*/
#blog-pager {
  padding: 0;
}
#blog-pager span {
  text-align: center;
  display: inline-block;
  font-size: 20px;
  padding: 0;
  background: #eee;
  border-bottom: 3px solid #ccc;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#blog-pager span:hover {
  background: #89CC00;
  border-bottom-color: #62B000;
}
#blog-pager-newer-link, #blog-pager-older-link {
  width: 270px;
}
#blog-pager a {
  position: relative;
  min-height: 70px;
  display: block;
  padding: 5px 45px;
  outline: none;
  text-decoration: none;
  color: #bdbdbd;
}
#blog-pager span:hover a {
  color: #46a03a;
}
.blr-arrow {
  margin-top: 6%;
  color: #bdbdbd;
  font-size: 30px;
}
.blr-arrow-left {
  margin-left: 5%;
  float: left;
}
.blr-arrow-right {
  margin-right: 5%;
  float: right;
}
.blog-pager-title {
  font-size: 15px;
  color: #adadad;
  margin: 0;
  font-style: italic;
}
#blog-pager a:hover .blog-pager-title, #blog-pager a:hover .blr-arrow {
  color: #46a03a;
}

Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>.

<script type="text/javascript"> 
//<![CDATA[$(function() {
  var newerLink = $('a.blog-pager-newer-link'),
    olderLink = $('a.blog-pager-older-link'),
    homeLink = $('a.home-link');
  newerLink.before('<');
  olderLink.before('>');
  $.get(newerLink.attr('href'), function(newData) {
    newerLink.append('' + $(newData).find('.post h3.post-title').text() + '');
  }, 'html');
  $.get(olderLink.attr('href'), function(oldData) {
    olderLink.append('' + $(oldData).find('.post h3.post-title').text() + '');
  }, 'html');
  homeLink.append('Bloganalyzer');
});//]]>
</script>

Style #2

Screenshot

Normal

Hover

Source

Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) these before </b:skin>.

/*-- Bloganalyzer navigation style #2 --*/
#blog-pager {
  padding: 0;
  border-top: 2px dashed #ddd;
  border-bottom: 2px dashed #ddd;
}
#blog-pager span {
  text-align: center;
  display: inline-block;
  font-size: 20px;
  padding: 0;
  width: 50%;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#blog-pager span:hover {
  background: #444;
}
#blog-pager-newer-link {
  border-right: 1px solid #969696;
  margin-left: -1px;
}
#blog-pager-older-link {
  border-left: 1px solid #b9b9b9;
  margin-right: -1px;
}
#blog-pager a {
  position: relative;
  display: block;
  padding: 25px 45px;
  outline: none;
  text-decoration: none;
  color: #bdbdbd;
}
.blr-arrow {
  margin-top: 6%;
  color: #bdbdbd;
  font-size: 30px;
}
.blr-arrow-left {
  margin-left: 5%;
  float: left;
}
.blr-arrow-right {
  margin-right: 5%;
  float: right;
}
.blog-pager-title {
  font-size: 15px;
  color: #666;
  margin: 0;
}
#blog-pager a:hover .blog-pager-title, #blog-pager a:hover .blr-arrow {
  color: #fff;
}

Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>.

<script type='text/javascript'>
//<![CDATA[$(function() {
  var newerLink = $('a.blog-pager-newer-link'),
    olderLink = $('a.blog-pager-older-link');
  newerLink.before('<');
  olderLink.before('>');
  $.get(newerLink.attr('href'), function(newData) {
    newerLink.append('' + $(newData).find('.post h3.post-title').text() + '');
  }, 'html');
  $.get(olderLink.attr('href'), function(oldData) {
    olderLink.append('' + $(oldData).find('.post h3.post-title').text() + '');
  }, 'html');
});//]]>
</script>

Style #3

Screenshot

Mouse hover on newer post button

Mouse hover on home button

Mouse hover on older post button

Source

Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>.

/* ----- Page Navigation ----*/
#blog-pager {
  clear: both;
  position: relative;
  height: 39px;
}
#blog-pager span {
  position: absolute;
  margin: 5px 0;
}
#blog-pager a {
  color: #fff;
  text-decoration: none;
}
#blog-pager a:hover {
  color: #eee;
  text-decoration: none;
}
#blog-pager-newer-link {
  left: 2%;
}
#blog-pager-older-link {
  right: 2%;
}
#home-link {
  left: 45%;
}
#blog-pager-title {
  position: absolute;
  padding: 5px;
  background-color: #eee;
  border-bottom: 2px solid #ccc;
}
#blog-pager span {
  border-bottom: 2px solid #346ebb;
  text-decoration: none;
  color: #fff;
  margin: 0 2px;
  padding: 4px 10px;
  background: #4795ff;
}
#blog-pager span:hover {
  background: #075fc3;
  border-bottom-color: #1a3c6b;
  text-decoration: none;
}

Search for (Ctrl+F) </head> and paste (Ctrl+V) these before </head>.

<script type='text/javascript'>
//<![CDATA[$(function() {
  var newPage = $('a.blog-pager-newer-link'),
    oldPage = $('a.blog-pager-older-link');
  var newPageTitle = '',
    oldPageTitle = '';
  $.get(newPage.attr('href'), function(dataNew) {
    newPageTitle = $(dataNew).find('.post h3.post-title').text();
  }, 'html');
  $.get(oldPage.attr('href'), function(dataOld) {
    oldPageTitle = $(dataOld).find('.post h3.post-title').text();
  }, 'html');

  var xOffset = 10,
    yOffset = 20;
  $('#blog-pager span').mouseover(function(e) {
    var value = '';
    if ($(this).attr('id') == 'blog-pager-newer-link') {
      value = newPageTitle;
    } else if ($(this).attr('id') == 'blog-pager-older-link') {
      value = oldPageTitle;
    } else if ($(this).attr('id') == 'home-link') {
      value = 'Bloganalyzer';
    }

    $('body').append('' + value + '');
    $('#blog-pager-title').css('top', (e.pageY - xOffset) + 'px').css('left', (e.pageX + yOffset) + 'px').fadeIn('fast');
  }).mousemove(function(e) {
    $('#blog-pager-title').css('top', (e.pageY - xOffset) + 'px').css('left', (e.pageX + yOffset) + 'px');
  }).mouseout(function() {
    $('#blog-pager-title').remove();
  });
});//]]>
</script>

Click 'Save template'.

Replace 'Bloganalyzer' with your blog/website name.

This widget is rarely used in blogger platform. So be the first one to implement this in your blog. I tried my best to keep things as simple as possible. Any type of question related to this will be appreciated.
Happy Blogging.

Comments

Blogger

Disqus

Bloganalyzer

Search