Tuesday, 2 July 2013

Tagged under: , , ,

How to add Number Page Navigation Widget in Blogger

Number Page Navigation Widget For Blogger
Page Navigation widget is the need of every blogger template. we see that different blogger templates have different styles of  page numbering navigation bar. It commonly appeared below in all posts on the home page of a blog. This widget helps in jumping to previous posts of a blog or turning to newer posts by single click. However you might have noticed that some professional blogger using numbering pagination widget along with newer post and older post button. This will only turn our blog design to professional looks but it will also helps to jump easily from page 1 to page 5 by single click. Previous day we have received several comments from our reader they want to know is there any way to add customize pagination widget with numbers along with the older post and newer post buttons. So to make them happy with best answer i was thinking why not to share a complete tutorial on adding customize numbering widget to blogger.  So, in this article we will show you how to add number page navigation widget in blogger blogspot.

Add Number Page Navigation Widget in Blogger

follow the below simple steps to add this widget in your blog. Please follow all the steps carefully to add this widget in blog. Let go how to add this numbering widget in blogger blog.

Step1:

  1. Go to blogger Dashboard:

  2. Go to template>>Edit/Html:

  3. Now find for the below code:

  4. <b:includable id='mobile-index-post' var='post'>

  5. Now past the below given code before the above line:

  6.     <b:includable id='page-navi'>
        <div class='pagenavi'>
        <script type='text/javascript'>
        var pageNaviConf = {
        perPage: 7,numPages: 5,firstText: &quot;First&quot;,
        lastText: &quot;Last&quot;,
        nextText: &quot;&#187;&quot;,
        prevText: &quot;&#171;&quot;
        }
        </script>

        <script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>
        <div class='clear'/>
        </div>
        </b:includable>


Step2: 

  1. Now find for this code

  2. <b:include name='nextprev'/>

  3. Now Replace the above code with the below given code:

  4. <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='page-navi'/>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='page-navi'/>
        </b:if>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include name='nextprev'/>
        </b:if>
        </b:if>


Step3:
  1. Now find for ]]></b:skin>  tag

  2. Now copy the below given code and past before ]]></b:skin> >> See the screenshot
page navigation widget for blogger
Now past the below code as shown in the screenshots:


    #blog-pager, .pagenavi {
         clear: both;
         text-align: center;
         margin: 30px auto 10px;
    }
    #blog-pager a, .pagenavi span, .pagenavi a {
         margin: 0 5px 0 0;
         padding: 2px 10px 3px;
         text-decoration: none;
         color: #fff;
         background: #2973FC;
         -moz-border-radius: 2px;
         -khtml-border-radius: 2px;
         -webkit-border-radius: 2px;
         border-radius: 2px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    }
    #blog-pager a:visited, .pagenavi a:visited {
         color: #fff;
    }
    #blog-pager a:hover, .pagenavi a:hover {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    #blog-pager-older-link, #blog-pager-newer-link {
         float: none;
    }
    .pagenavi .current {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    .pagenavi .pages, .pagenavi .current {
         font-weight: bold;
    }
    .pagenavi .pages {
         color: #fff;
         background: #2973FC;
    }


Now Click On Save Button And you done almost:


Recommended Article: Change older post newer post Links to buttons in Blogger

Recommended For You:  Add Social Sharing Buttons widget below every post in Blogger




Troubleshooting

We hope that the above tutorial would help you how to add stylish page navigation widget to blogger perfectly without any hard-warm. If you follow all the above steps correctly then you could easily get the advantage using this gadget in your blog. Guys if you faced any problem in implantation then then do not feel headache just post your queries in below comment section. Bundles of Thanks & Happy Blogging!)

51 comments:

  1. Page Number Navigation or Pagination is really works to encourage our readers to check more posts. I'm also using Pagination in my blog and whenever I check my Google Analytic real time stats, I always found 1-2 readers on my pagination URLs.
    Great sharing and worth follow tutorial.
    Regards!
    Ankit

    ReplyDelete
    Replies
    1. You are right Ankit Bro Page Number Navigation works encourage our reader to check more older posts. This widget is widely used by many bloggers. Thanks Alot

      Delete
  2. Very Nice Bro keep Sharing I Am Looking For This Type Of Numbered Page Navigation Thanks For That..
    My New Post Is:
    http://bloggertechniches.blogspot.com/2013/07/404-page-error-for-blogger.html

    ReplyDelete
  3. These's pretty nice bro Hafeez. I've installed it on my new template soon to be launched. Thanks so much for sharing and do have a wonderful weeks ahead.

    Best Regards

    Victor Noah

    ReplyDelete
    Replies
    1. Welcome My bro and thanks for respecting our our work, see you soon.

      Delete
  4. Excellent Post Brother. I must say you are working so hard for us. we really like the way you are sharing useful widgets and tricks with us!

    ReplyDelete
    Replies
    1. Wow Saqib Ahmad & thanks for praising PBT. hope to see you in coming tutorial.

      Delete
  5. again a very nice post from you bro. I must say that you are the best bloggers among the world.

    ReplyDelete
    Replies
    1. Oh Nirmal There are many bloggers our of there in the world, thanks for appreciation,

      Delete
  6. Very nice post.. i am just going to add this ;)

    ReplyDelete
  7. Hafeez bro Nice Post Lot's Simple We can Easily insert this widget into our blogs therefore our visitors can easily navigate our older posts
    Thanks for this
    Regards
    R.S

    ReplyDelete
    Replies
    1. Yes readers are easily navigate to jump from newer posts to older one with single click so thats amazing pagination widget for blogger.

      Delete
  8. Worth reading Bro!!! I will do this trick to increase traffic in my blog.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Nice widget, But i think that the Number nav widget shows the last post of the first page into first of the second page, It means it repeats the same post
    Regards,
    Skillblogger

    ReplyDelete
  11. thank you..it 's good one..

    ReplyDelete
  12. nice widget

    http://waseeela.blogspot.com/

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. thanks you admin i was trying to add the pagenavigation but all most widget and tricks given on net were not working so finaly your method worked for me and i will like to say thankyou again

    ReplyDelete
  15. But dear admin one thing you forgot to tell your visitors so i will tell them.if
    you want to change posts per page then just change the number 7 from the step one that is "perPage: 7" and if you can also change pages to show by changing the number 5 that is "numPages: 5".
    and remember if you have a diffualt blogger template then set post per page in your template exactly equils to above perPage: 7.
    thanks.

    ReplyDelete
    Replies
    1. Ha ha they should must take some common sense

      Delete
  16. But Help Me How Can I Keep It On Center Of Page. And It Shows Like: page 1 of 8 First<<12345>>Last ... And I Like To Show On My Page== Page 1 of 8 First<< 1 2 3 4 5 >>Last
    So Help Me With My Example my Mail Address:: ksmaity777@gmail.com

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. this trick is not working
    pls help for www.googleservices.co.in

    ReplyDelete
  20. this is working thanks for this tricks.

    ReplyDelete
  21. brother how to make size of buttons bigger

    ReplyDelete
  22. Hey Bro,
    thank you so much for sharing tips and tricks with us. this post helped me a lot :)

    ReplyDelete
  23. simply amazing...it works! many, many thanx..

    ReplyDelete
  24. Thanks a lot. actually worked on my blog.

    ReplyDelete
  25. Already Tried Many Posts And Articles About It...
    But Didnt Worked...

    Check ApplyWise.Org Its Working...
    Thanks... Bro.. :)

    ReplyDelete
  26. Correctly said bro. Page navigation is one of the important concrete of any blog. This attract the user to check older posts.
    Thanks,
    Ashutosh

    ReplyDelete
  27. Hi! I used your codes for my blog www.rozellevendil.blogspot.com. It actually works perfectly on my homepage. But the case is different when a blog category is selected. The number page navigation shows there are 3 pages under a certain blog label, but the first page already shows all the blog posts under that label. When page 2 or 3 is selected, it just repeats the same content shown in page 1. Is there a way I can do to fix this issue? Please advise. Thank you!

    ReplyDelete
  28. Thanks for nice sharing about add page number navigation widget. It is excellent post for add nice page navigation in blogger blog. I must use this post for my site.
    Thanks again.

    ReplyDelete
  29. Unfortunately, the widget does not show on my page. Can you help?

    ReplyDelete
  30. after applying above method now even my old widget "older post and new post" is not showing and also no any page number is there. PLease help me.

    ReplyDelete
  31. Bro i tried this but this is not working on my blogs can you help me out my blogs: www.93apps.blogspot.com

    ReplyDelete
  32. THANKS BUT ... I WANNA CHANGE COLOUR .. I THINK ITS NOT MATCHING http://lqtmjokes.blogspot.in/ WITH MINE ..
    PLEASE REPLY ...

    ReplyDelete
  33. it worked for me. Thank you so much. have tried others but they werent working perfectly, but yours did. thank you

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism