Pagination In Blogger

| |
Hello, today I am here with Blogger Pagination/Page Navigation widget for your blog. This is a cool simple widget with the power of CSS and JQUERY. This makes navigation easy and links to more pages. It is simple to add this to your blogger blog. And very easy to customize as you wish.



ADDING PAGINATION WIDGET TO BLOGGER:-

1. Sign-in to your blogger account.
2. Go to your blog.
3. Then go to Template and click "EDIT HTML".
4. Now find for ]]></b:skin>.
5. Just before/above ]]></b:skin> paste the below code-
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:700px;
padding:17px;}
.showpageNum a,.showpage a {background:#069; color:#FFF;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:12px 18px 12px;-moz-border-radius:36px;
-webkit-border-radius:36px;
border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange;
color:#FFF;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:12px 18px 12px;-moz-border-radius:36px;
-webkit-border-radius:36px;
border-radius:36px;}
.showpageOf{margin:0 8px 0 0;
font-family:'Coming Soon', cursive;
text-decoration:none;font-size:100%;}
.showpagePoint {background:orange;
color:#FFF; margin-right:.6em;text-decoration:none;
font-size:15px;font-style:italic;line-height:0;text-align:center;
padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;
border-radius:36px;}
5. Now search for </body> .
6. And just befor/above </body> paste the below code- 
<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

Now you can make some customizations-
In the above code you can change some options like-
postperpage : Number of Post that will appear on a Page

numshowpage : Number of Pages that will appear in the Page Navigation Menu


upPageword : Word or phrase that will appear in the Forward Link

downpageWord : Word or phrase that will appear in the Backward Link

1 comments:

Author

This comment has been removed by the author.

Post a Comment

Powered by Blogger.