How to Add Next and Previous Button with Post Titles on Blogger?
Show Next and Previous Post Titles Above Blogger Comment section. How to Show Next & Previous Post Titles in Blogger with jQuery Navigation? Use next and previous post titles as navigation in Blogger.
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.
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.
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 -> Theme -> 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:'Oswald',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:'Oswald',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 == "item"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
</div>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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.
- For example the final code will be like below
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 Theme 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.
28 comments
Next button shows title of the post 10 times
Please check http://www.hotfunnypics.in
http://www.bloggerspice.com/2013/06/add-auto-read-more-with-wide-image.html
Mobile App Development
but i want stylish like this page.
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!
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 :)
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/
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: '
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: '
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.
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.
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.
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
For displaying the Post thumbnail I will publish a tutorial soon. Please stay tuned.
Thank you.
Thank you.