Labnol like Older and Newer Post Link

Today we're going to learn a new blogger template hack tricks which we guess you'd really like and appriciate,cause many people wish to have a widget like this in their blog .Have you ever listen the name of labnol.org?It is one of the most popular blog around the world and the firstblog belongs toindia This blog is run by amit agarwal the one of the most senior pro-blogger available till now .So now the question may arrive on your mind that why we're  talking about amit agarwal?It is because here we'll going to provide  how to add pagination like labnol blog,the most beautiful pagination we all have ever seen.Just like the screenshot  these are some old style older post and newer post widget you seen on many blogs but now we are going to  change it into a new and stylish older and newer post widget in blogger to make our blog's look something spicy.This widget will surely help you a lot increasing your traffic as well as their spending time on your blog.

 Must Read : Scroll Back to Top Button For Blogger

Add Labnol Like Older and Newer Post Link

• Log onto blogger > your blogger dashboard
• Template > edit html > proceed
• Search(CTRL+F ) for  </head> code tag 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Next paste the above code just before  the </head> tag in your template and save your template

• Next go to layout section
• add a gadget below post gadget 
• select html/javascript and insert the following code within it

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

 Must Read : Email Subscription Box Blogger

Now save it and see the new looks of your blog pagination.Hope you like it.Any question?use the comment box below.Thanks for visiting.

Articles You May Like