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. 

Related Post

Speak Your Mind

Esobondhu. com says: 3/11/2015

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

Mohammad Fazle Rabbi says: 3/11/2015

Thanks for your feedback.

Somnath Travels says: 4/02/2015

When i have done this

Next button shows title of the post 10 times

Please check http://www.hotfunnypics.in

Mohammad Fazle Rabbi says: 4/03/2015

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

Learning World says: 10/15/2015

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

Mohammad Fazle Rabbi says: 10/15/2015

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.

Dot GIF Comix says: 7/12/2016

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

Mohammad Fazle Rabbi says: 7/13/2016

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

S Prajapati says: 9/10/2016

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

Mohammad Fazle Rabbi says: 9/11/2016

Welcome Prajapati :sp

News 2 says: 11/06/2016

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

but i want stylish like this page.

Mohammad Fazle Rabbi says: 11/07/2016

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

Freshers Job says: 3/22/2017

This is really great Post

ashley anne says: 4/02/2017

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!

Rabbi Khan says: 4/03/2017

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 :)

maricor says: 7/08/2017

This was helpful. Thanks!

Rabbi Khan says: 7/09/2017

Welcome Maticor. Thanks for dropping your comment. :)

1080Anime says: 9/18/2017

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

Rabbi Khan says: 11/15/2017

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/

Rabbi Khan says: 11/27/2017

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.

Mundo en familia says: 11/29/2017

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.

Rabbi Khan says: 12/07/2017

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

Mundo en familia says: 12/07/2017

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 *