Page Navigation with Blog Pager Design for Blogger Templates

Page Navigation with Blog Pager Design for Blogger Templates

11
data:blog.title
Pagination

Page navigation for blogger is most important widget for blogger. Generally this widget can make visitors easy navigate to blog posts. For engaging the visitors with your blog page navigation is very powerful widget.  Always readers get bore by Next or Previous page button because they can't visit  according to their desire pages instantly. I have designed this Page Navigation that is attractive and it will work smoothly. As well as it will change the Blog Pager (Next, Home, Previous) appearance that will make more attractive. 


Live Demo



Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.

/* Blog pager by www.bloggerspice.com*/
#blog-pager{
clear:both;
text-align:center;
margin:10px;
padding:5px 0 0 0;
height:30px;
}
#blog-pager a,.showpagePoint,.showpageOf,.showpageNum a{
text-decoration:none;
color:#fff;
background:#222;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:0 2px 0 0;
padding:4px 10px 5px;
border:1px solid #000;
text-transform: uppercase;
font:normal normal 12px Oswald;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}
#blog-pager a:visited{
color:#fff;
}
#blog-pager a:hover,.showpagePoint {
background-color: #264778;
border: 1px solid #000;
color: #fff;
}
#blog-pager-newer-link{
float:left;
}


Step 5 Now Find this code </body> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </body> and Save the templates.

<!--Page Navigation by www.bloggerspice.com Starts-->                                 <script type='text/javascript'> var pageCount=1;
var 
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggerspicebd.googlecode.com/files/pagenavi.js' type='text/javascript'/>
<!--Page Navigation by www.bloggerspice.com Ends-->
var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://bloggerspicebd.googlecode.com/files/pagenavi.js' type='text/javascript'/>                                                                               <!--Page Navigation by www.bloggerspice.com Ends--><div class='clear'></div>

Customization:

  • Change the Digit Count=1 for Display Post Per page
  • Change the Digit displayPageNum=3 for display Page Number
Page Navigation with Blog Pager Design for Blogger Templates
4 Stars stars - "Page Navigation with Blog Pager Design for Blogger Templates" Page navigation for blogger is most important widget for blogger. Generally this widget can...

Post a Comment

thank you sir I was looking for it..And it's working well.

Good Brother.
But Page Numbers are not working properly.Thanks

I just visited ur site you are only using CSS code but already using this pagination in many site and I have just tested it another site and working good. Kindly install it I will check it again to make it work. Thank you brother.

I can't save templet.
Error parsing XML, line 2021, column 3: The element type "body" must be terminated by the matching end-tag "body>".

Hi Zuolo It should work now. I have added 1 extra line..and follow the above tutorial step by step..but it works on most of the templates

Bro I want recent comments widget like yours if possible please give the script.

Hi Nauman I have already shared this comment box. Please visit--

http://www.bloggerspice.com/2013/05/stunning-latest-comment-box-widget-with.html

i have same problem like Zuolo

Hi Andrej..pls remove the code after line from step 6. And let me know that is it working or not?

Page Numbers are not working properly. My URL: http://gulpatutorial.blogspot.in/

This widget won't work on your template. because your template containing different script. and this will be very hard to remove specific script. :ex

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *