A blog about technology, Internet, social media, blogging tips, seo tips, computer tips and tricks, earning money online, etc.
Numbered Page Navigation For Blogger
You have notice numbered page navigation in many blogs. This feature is not provided by blogger blogs. Instead blogger blogs provides older posts and previous posts links. Numbered page navigation not only helps in improving the look of the blogger blog, it also helps in faster navigation to older posts . This tutorial will help you in incorporating numbered page navigation in blogger blog.
Steps To Change Older Posts Link In Blogger With Numbered Page Navigation:-
1) Login to Blogger Dashboard and navigate to Layout > Edit Html
2) Press Ctrl + F and find ]]></b:skin>
and just above it paste the codes given below
3) Now Find </body>
and just above it paste the following codes
4) Save the template and its done.
This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.
Steps To Change Older Posts Link In Blogger With Numbered Page Navigation:-
1) Login to Blogger Dashboard and navigate to Layout > Edit Html
2) Press Ctrl + F and find ]]></b:skin>
and just above it paste the codes given below
.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }
This was the CSS part for look and feel of the page navigation. You can modify it according to your need3) Now Find </body>
and just above it paste the following codes
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if>
</b:if>
<!--Page Navigation Ends -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if>
</b:if>
<!--Page Navigation Ends -->
4) Save the template and its done.
This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.
Subscribe to:
Post Comments (Atom)
-
HeartATech
Copyright©2012 HeartATech. Articles cannot be reproduced without permission from the author.
Powered by Blogger
No comments:
Post a Comment