When you open a Blogger blog post, there are three links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress blog's display the post titles. But not Blogger.In this post change those static texts to dynamic post titles.We will apply this hack using jQuery.Just follow my steps and you will successfully replace your older and newer posts links with post titles.
How to replace older and newer posts links
1. Adding jQuery.
For jQuery codes to work, first you have to load jQuery JavaScript library.
(Note - Skip this step if you have already added jQuery to your blog)
- Go to Blogger Dashboard > Design > Edit HTML.
- Now find for </head> tag.
- Add below code just above </head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
2.Adding The Blog Pager Code
- Now go to Page/Edit Layout.
- Click on Add a Gadget > HTML/Javascript.
- Paste below code and save it.
<!-- Post title blog pager by helperblogger.com START -->
<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>
<!-- Post title blog pager by helperblogger.com END -->
On post pages it will show the actual titles of the next and previous posts. On index pages (i.e. homepage, label pages and archive pages) it will show the titles of the topmost post of the next and previous index pages. A tooltip with “Newer post” or “Older post” will appear when you hover the post title, making sure readers can tell which is which.
تم النشر يوم
الجمعة، 5 يوليو 2013 ' الساعة
ليست هناك تعليقات:
إرسال تعليق