How to Add Page Pagination in Blogger

              Page Navigation is very helpful to navigate the posts in your blog,and it helps your readers to move deep archive. It can include Beautiful page navigation in your blog. Here i give a small step-By-step guide to add this to your blog . Myself also included this navigation in my blog.Have a Look at it. :)

  • Copy the CSS Code Below and Paste it in HTML code before </b:skin>

div.pagination {
font-size: 11px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
padding:2px;
background-color:#c1c1c1;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
background-color:#c1c1c1;
text-decoration: none; /* no underline */
color: #000;
}
div.pagination a:hover, div.pagination a:active {
background-color:#99ffff;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
font-weight: bold;
background-color: #fff;
color: #303030;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
background-color:#c1c1c1;
color: #797979;
}

  • Now Search for :
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>
  • Now add Below Code after the above Code.

    &lt;script type=&quot;text/javascript&quot;&gt;

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= &#39;&#39;;
    var upPageHtml =&#39;&#39;;
    var downPageHtml =&#39;&#39;;

    var pageCount = 5;
    var displayPageNum = 5;
    var upPageWord = &#39;Previous&#39;;
    var downPageWord = &#39;Next&#39;;



    var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=&#39;&#39;){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=&#39;&#39;){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!=&#39;&#39;) postNum++;
    htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p&lt; htmlMap.length;p++){
    if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    if(fFlag ==0 &amp;&amp; p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }

    if(eFlag ==0 &amp;&amp; p == thisNum){
    downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    eFlag++;
    }
    }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    }//end for(var p =0;p&lt; htmlMap.length;p++){

    if(thisNum&gt;1){
    if(!isLablePage){
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }else{
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }
    }

    html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

    if(thisNum&lt;(postNum-1)){
    html += downPageHtml;

    }

    if(postNum==1) postNum++;
    html += &#39;&lt;/div&gt;&#39;;

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);

    if(postNum &lt;= 2){
    html =&#39;&#39;;
    }

    for(var p =0;p&lt; pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&amp;&amp;pageArea.length&gt;0){
    html =&#39;&#39;;
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    &lt;/script&gt;

    &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    }


    • Now Save it .And refresh your Blog.

    By : Sooji
    Category:

    5 comments:

    1. so why didn't this work? is there something missing.

      ReplyDelete
    2. which blogger template layout are you using. Please help!!

      ReplyDelete
    3. I am using my own designed Blogger Template.

      ReplyDelete
    4. @?
      Note : Actually this Code will work only for blog contains more than 50/100 Blog posts/Then Only Pagination works well.!Other ways you can't see anything in the right place.

      ReplyDelete
    5. i want to add pagination in pages could you help????

      ReplyDelete

    Type your Comment Here...!