Oct 4, 2016

Add Next & Previous Post Titles Navigation Widget in Blogger

data:blog.title
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.


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 With Link In Blogger?

First you have to add implementation code of this plugin and their after replace old newer and older pagination buttons. So, first add the code;

STEP 1] Go to Blogger.com >> 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='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: 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 MyBloggerGuides.com
Originally Created By MyBloggerTricks.com ***********************************************************************/
.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 li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbg-post-navigation li.next 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 li.next:hover, .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 li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.mbg-post-navigation li.next i, .mbg-post-navigation li.previous i ,
.mbg-post-navigation li.next,  .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;'/>
<b:else/>
<i class='fa fa-chevron-right'/><a><strong>Sorry!</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
<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;'/>
<b:else/>
<i class='fa fa-chevron-left'/><a><strong>Sorry!</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li></ul>
<script type='text/javascript'>
//<![CDATA[
(function($){  
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>');  
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous Post</strong> <span>'+$(data2).find('.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>

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>
     </span>
   </b:if>
   <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>
     </span>
   </b:if>
   <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>
   </b:if>
</div>
<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;'>
THE ABOVE BIG CODE
</b:if></b:if>

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?
- Blogging Is Not For You If You Don't Have These Qualities.
- How To Build High Quality Backlinks For Your Blog?
- Top 151+ Free High PR Directory Submission Sites List.
- Load Disqus Comments On Click Or Scroll In Blogger.

Original Source - MyBloggerTricks

Conclusion:

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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.