How To Add Pagination Widget In Blogger - 2020

Today after a long time we have come up with an amazing tutorial for blogger, this amazing widget will help you in creating a professional looking blog in minutes. Having a pagination widget in blogger is mandatory in terms of functionality and user experience. It helps you to arrange your blog posts in most professional way. Based on simple scripts this widget is fast and reliable. Installing this widget is very easy and can be done in simple way.
Lets move further and see How To Add Pagination Widget In Blogger - 2020. You can check a live preview of the Pagination widget by clicking the button below.

See Demo Live Preview

Why Pagination Widget Is Important?

If you stick to blogger's default format, that is newer and older page buttons then it makes your blog functionality limited, at the same time it make your blog's user experience very bad, as users can't navigate your blog easily, and they have to go through each and every page, where as if you are using this pagination widget then they can check whichever page they want, going through various posts will become easy, not only this is functional but it will give your blog a professional touch.

What Is Special In Our Widget ?

OK, everyone says that they have made the best widget and that is normal but we claim that we have the widget which no one has, Yes its true. Our widget is professionally optimized to show each post without skipping and it loads with Ajax that makes it fast loading !! Yepieee ( Very Fast Loading ). Also the script which we are using is mobile friendly.

Let's Start Step-1 ( Adding CSS ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Pagination Widget by SoraBloggingTips ######################### */
#blog-pager{
    clear:both;
    text-align:center;
    margin:0
}
 #blog-pager-newer-link a,#blog-pager-older-link a{
    display:block;
    float:left;
    margin-right:6px;
    padding:0 13px;
    border:1px solid #010101;
    text-transform:uppercase;
    line-height:32px;
    font-weight:700;
    color:#010101
}
 #blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{
    background-color:#010101;
    color:#fff!important
}
 .showpageNum a,.showpage a,.showpagePoint{
    display:block;
    float:left;
    margin-right:6px;
    padding:0 12px;
    border:1px solid #010101;
    text-transform:uppercase;
    line-height:32px;
    font-weight:700;
    color:#010101
}
 .showpageNum a:hover,.showpage a:hover{
    background-color:#010101;
    color:#fff!important
}
 .showpageNum a i,.showpage a i{
    transition:all .0s ease;
    -webkit-transition:all .0s ease;
    -moz-transition:all .0s ease;
    -o-transition:all .0s ease
}
 .showpagePoint{
    background-color:#010101;
    color:#FFF
}
 .showpageOf{
    display:none!important
}

Step-2 ( Adding SCRIPT ) - Most Important !!

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
    var postperpage=7;
var numshowpage=3;
var upPageWord ='<< Prev';
var downPageWord ='Next >>';
var urlactivepage=location.href;
var home_page="/";
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='  '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+=''}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
//]]>
</script>
</b:if>
</b:if>

Note :- If you want to display more post then change the value which are marked in red from the above code. If you want to increase the numbers in widget then replace the blue value.

If you are using this widget and some of your posts are skipping then, Remember one thing you have to keep the post count same in your blog settings and pagination widget. There is a limit of 1mb from blogger side, only 1mb of images or text you can show in home page and you are exceeding that limit and that is the reason rest of the post is going on next page, there is not any solution, but you can try page break after 1st paragraph in every post, may be this will help.

Conclusion

Congrats !! You have made it. now you have learned that How To Add Pagination Widget In Blogger - 2020. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Adios !! (Goodbye in Spanish).