Show Next and Previous Post Titles Above Blogger Comment Box

Show Next and Previous Post Titles Above Blogger Comment section

12
data:blog.title
Blog Pager

Blog pager is a way for navigation which can be make more user friendly by displaying Next and Previous Post Titles instead of simple link. By using jquery this is possible to replace simple navigation link with post titles. And we can also move that pager above the Blogger Comment section. Generally most of the cases Next and Previous link placed after comment box and it causes a problem. We have seen that some Blog posts are written with 1000+ word so in that case article's height will be longer in post pages. And this is often difficult to get the next and previous post link below comment box. However sometime visitors skip that site. So moving that Next and Previous post link above comment section grab better attention of the Blog readers. And this will be more lively if we can display the Next and Previous post title as a replacement for monotonous link.

Live Demo
                         
The tutorial maybe found little tough. But I have tried to explain this as much as easy method. Just follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 And Paste the below code above/before ]]></b:skin> 


/*www.bloggerspice.com Pager*/
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#333333;text-transform:uppercase;line-height:1.625em;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#;text-transform:uppercase;line-height:1.625em;font-weight:700}
.pager-content{width:99.5%;overflow:hidden;margin:10px 0 0;padding:10px 0 0}
.pager-content a:hover,.pager-content{color:#000;text-decoration:none}
.showpageNum a,.showpage a,.showpagePoint{background:#DE3C3C;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;margin-right:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{color:#FFF}
.showpageOf{display:none!important}

Step 5 Now find </head> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 And Paste the below code above/before </head> 

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

Step 7 Now find <data:post.body/> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 


You will find 3/4 time this code go for second one.

Step 8 And Paste the below code below/after <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
 <div class='pager-content'>
<div id='blog-pager-newer-link'>
    <b:if cond='data:newerPageUrl'>
        <h6>Previous</h6>
      <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>
   </div>
<div id='blog-pager-older-link'>
    <b:if cond='data:olderPageUrl'>
        <h6>Next</h6>
      <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>
    </b:if>
   </div>
 </div>
  <div class='clear'/>
  </div>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});</script>
</b:if>

Hiding the existing Next and Previous text links

In this steps we will hide the existing Next and Previous text links. because after following the above steps you will Next and Previous post title above comment box. I mean end of Blog post. But previous Next and Previous text link still visible below the comment box. So simply we will hide that. Just follow the below steps-

Step 9 Find the default Blog Pager code like 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>
      </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>

Step 10 Now wrap the above code inside below conditional tag.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Place the above code Here
</b:if></b:if>
  • For example the final code will be like below
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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>
</b:if></b:if>

Step 11 Now simply hit the Save Template button.

So that's all and check your Blogger template and see the Next and Previous Post Titles Above Blogger Comment section. For further help feel free to write me. Thank You. 
Show Next and Previous Post Titles Above Blogger Comment Box
4 Stars stars - "Show Next and Previous Post Titles Above Blogger Comment Box" Blog pager is a way for navigation which can be make more user friendly by displaying Next and...

Post a Comment

awesome post, i'm so glad i found this. thanks for this article rabbi vai

Thanks for your feedback.

When i have done this

Next button shows title of the post 10 times

Please check http://www.hotfunnypics.in

Hi there, I have check this code in Blogger default and custom template. And also just check your Blog you should use Autoreadmore system in your Blog..then it will work. Tutorial link given below-

http://www.bloggerspice.com/2013/06/add-auto-read-more-with-wide-image.html

I have done all the steps but i cann't find any result plese help. check please http://collectebooks.blogspot.com/

Hi there you are using themexpose's free version template. This kinds of free template often release with custom coding. And only Jquery number page navigation used on premium version. So it won't work there. But if you try this in any Blogger default template then it will work.

Doesn't work on my blog www.dotgifcomix :/

Hi Dotgif, This widget works 100% but the problem is about placing the script in right place. First you can add this widget script in Blogger default template and after that try in your custom Blogger template. Hope it will help you to find out the right place for adding script. :as

very useful tips for blogger.. thanks for sharing this....
Mobile App Development

Welcome Prajapati :sp

Hi, it's worked in my blog www.news2.in.

but i want stylish like this page.

Hopefully I will improve it in future and publish in my Blog. :wr

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *