How to Replace Older/Newer Post buttons with Post Titles in Blogger 2016
Hello
Guys! You must have seen some popular blogs who have replaced older and newer
post buttons with post titles and you must be wondering that “how to do it?” So
today I am going to show you how to replace older/newer post buttons with post
titles in blogger.
Let
Start it below:
How to Replace Older/Newer Post buttons with Post Titles
When
you replace older and newer post buttons with your post titles then it shows
the professionalism and helps your reader to find out that what actually they
are missing, with reference to your old post. In this way you can get more
exposure for your older posts too which is why many pro bloggers are using this
tactic.
So, follow the given steps to replace that older and newer post
buttons with your post titles. Now without taking your time more, we’d request
you to get towards the steps;
1.Sign in to your Blogger blog.
2.Go to Template >> Edit HTML.
3.Search for</head> tag. After finding
</head> tag, paste the following code above it.
Note: Only follow this step if you are not using any jquery.min.js
file on your template, so be sure you first search for jquery.min.js.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
4.Now, you need to click on Layout from the
sidebar and then select Add a Gadget.
5. From the list of gadgets search for HTML/JavaScript and
select it. Now you need to paste the following code in the HTML Text box.
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link
{font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
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").text();
$("a.blog-pager-newer-link").text("<<
" + newerLinkTitle);
});
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
});
});
</script>
6.Now just click on Save Button.
You are done now. Now older and newer post links will be replaced with your post titles.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
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").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
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
});
});
</script>
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
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").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
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
});
});
</script>
I hope that after reading this article you can easily Replace Older/Newer Post buttons with Post Titles.If you like this article share it on social media to help other blogger friends.
Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.
I hope that after reading this article you can easily Replace Older/Newer Post buttons with Post Titles.If you like this article share it on social media to help other blogger friends.
Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.
No comments: