In my previous post we learned how to replace Newer, Older and Home links with your own text and images in blogger. Now I'm going to explain how to get Previous post title in place of Newer Post link and Next post title in place of Older Post link.
1. First backup your blogger template. If you don't know how to backup your blogger template click here
2. If you already copied any jquery tag skip this step. Else go to your blogger dashboard click on Template. Click on Edit HTML then click to Proceed and Expand widget templates and search for </head> Now copy following code and paste before </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Now save the template and close it.
3. Now go back to your blogger dashboard, click on layout and Add a Gadget then select HTML/Javascript gadget and copy the following code in content block.
Save gadget and from now in place Newer Post you'll see Previous Post Title and in place of Older Post you'll see Next Post Title as shown in below pic. You can change font size and width according to your convenience.
1. First backup your blogger template. If you don't know how to backup your blogger template click here
2. If you already copied any jquery tag skip this step. Else go to your blogger dashboard click on Template. Click on Edit HTML then click to Proceed and Expand widget templates and search for </head> Now copy following code and paste before </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Now save the template and close it.
3. Now go back to your blogger dashboard, click on layout and Add a Gadget then select HTML/Javascript gadget and copy the following code in content block.
<style type="text/css"> #blog-pager-newer-link {font-size:20;width:500px;text-align:left;} #blog-pager-older-link {font-size:20;width:500px;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> |
You May Also Like
Hi, I tried, it did not work:-(
ReplyDeleteHey , fixed it.. thanks.
ReplyDelete