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.
- 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>
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 |
That's pretty cool! I wish I'd have the opportunity to try it one of these days :)
ReplyDeleteyup,it's cool :)
Deletenot working
ReplyDeleteCodes updated try now.
Delete