Show Next and Previous Post Titles Above Blogger Comment Box

Show Next and Previous Post Titles Above Blogger Comment section

Comments: 25
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. 

Speak Your Mind

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

This is really great Post

I can't get this to work :(

I am working with bloggers latest templates (soho theme) but it seems like none of my html changes are actually working... Please help!!

thereisabookouthere.blogspot.com

thank you Rabbi!

Hi Ashley
I just checked your site, Soho theme is suitable for news site. And this theme doesn't contain any page navigation feature. You can't navigate from one post to another post from Blog post page. So this trick won't work in this theme.

:( In Soho theme they have hide the page navigation, Even I have remove that code but still page navigation is not appearing.


.blog-pager .blog-pager-newer-link, .blog-pager .home-link {display: none;}


Without page navigation script you can't apply my widget script. So try to use different theme that has page navigation system and use this trick.

Thank you :)

This was helpful. Thanks!

Welcome Maticor. Thanks for dropping your comment. :)

Its not working on my site. pls help .

its showing NEXT Older Post not the post title.

http://mymoviemad.blogspot.com/2017/09/dark-chocolate-2016-hdrip-hindi-720p.html

Perhaps navigation system is hidden in your site. :(

Anonymous 11/27/2017

Hi, I'm trying it in my blog and I almost get it. It just work for "previous posts" not "next posts" maybe because the name is too long. How can I make a separation between "previous" and "next" like is in your blog. I'm not sure if I did it good.
Also want to know how can I put it in reverse order: previous in left and next in right. And How can I add the symbol (>) or (<) like in your blog to symbolize next or previous. Thanks!!!
My blog is in spanish.
http://www.mundoenfamilia.com/

Hi There :)
From Blogger Dashboard go to Theme->Edit HTML

Now please find and remove the below code block from your Blogger Theme. It will start display Next Post.


.blog-pager .blog-pager-newer-link, .blog-pager .home-link {
display: none;
}



Now Find code like below---- and change text-align: left; to text-align: right;



#blog-pager-newer-link h6 {
margin: 0;
padding: 0;
text-align: left;
font-family: &#39;
font-size: 14px;
color: #333333;
text-transform: uppercase;
line-height: 1.625em;
font-weight: 700;
}



Now Find code like below---- and change text-align: right; to text-align: left;


#blog-pager-older-link h6 {
margin: 0;
padding: 0;
text-align: right;
font-family: &#39;
font-size: 14px;
color: #333333;
text-transform: uppercase;
line-height: 1.625em;
font-weight: 700;
}



For using Symbol in this widget you have to use "Font Awesome".

Thank you.

Anonymous 11/27/2017

Many thanks.
To finish fixing it I have some doubt. The title of "Older posts" is aligned to the left, but the text does not. It is aligned to the right.
It is possible to do it like in your blog, where is the "newer blog" box next to "Older blog" with a line of separation? It seems more compact.
And finally, if I want to add the symbol > or <, comment that I have to change the font to "Awesome". But where do I make the change? Is it instead of "sans-serif" or "Oswald"?
Thank you very much and apologize for so many doubts, you see that I am a novice.

Thanks Rabbi!!

Now it looks good, but although the name of "Older post" is aligned to the left, the text of the title of the post is aligned to the right and I do not see how to change it so that both are left.

On the other hand, would it be possible to put "Next and previous post titles" in the format that appears in your blog? With the indicative arrows (<>) and with the line in the center that divides the two fields. I do not know exactly how and where to put the "Awesome Font" that you tell me or how to put the line of separation.

Thank you very much again and excuse so many doubts, you can see that I am new to this topic.

Hi Mundo en familia :)
Please add the below script before </b:skin>. it will solve your problem.



div#blog-pager-newer-link {
width: 48%;
float: left;
text-overflow: ellipsis;
overflow: hidden;
border-right: 1px solid;
padding-right: 25px;
}


div#blog-pager-older-link {
float: right;
width: 48%;
padding-left: 10px;
text-overflow: ellipsis;
overflow: hidden;
}


If you use Font Awesome then your theme loading script will affect. So don't use Font Awesome.

http://www.bloggerspice.com/2015/06/how-to-add-Font-Awesome-icon-list-and-fixed-width-style.html
http://www.bloggerspice.com/2014/03/customize-font-awesome-icons-in-blogger.html
http://www.bloggerspice.com/2015/06/how-to-change-font-awesome-icon-size.html
http://www.bloggerspice.com/2015/08/New-font-awesome-4.4.0-released-with-additional-66-icons.html

Thank you :up

Thanks Rabbi, it looks really good now!!

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *