How To Add Pagination Widget In Blogger

How To Add Pagination Widget In Blogger - 2021

Today after a long time we have come up with an amazing tutorial for Blogger, this amazing widget will help you create a professional-looking blog in minutes. Having a pagination widget in Blogger is necessary for terms of functionality.

It helps you organize your blog posts in the most professional way. This widget is fast and reliable based on simple scripts. This widget is very easy to install and can be done in a simple way.

Let's go ahead and see how to add a pagination widget in Blogger - 2021. You can see a live preview of the pagination widget by clicking on the button below.

Why is the Pagination Widget Important?

This limits the functionality of your blog if you stick to Blogger's default format, ie new and old page buttons, plus it greatly degrades the user experience of your blog, because the user can easily change your blog Can not navigate through, and they have to go to every page, where if you are using this pagination widget, they can check any page they want, it will be easy to go through different posts, Not only is it functional, but it will give your blog a professional touch.

What is special about our widget?

Ok, everyone says that they have created the best widget and it is normal but we claim that we have a widget that no one has, yes it is true. Our widget is professionally optimized to show every post without skipping and it loads with Ajax which makes it load faster !! Yepi (very fast loading). Also, the script we are using is mobile friendly.

Step-1 (Adding CSS)

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

The first thing you need to do is log in to your Blogger account and go >> 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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+="Page "+nomerhal+' of '+maksimal+"";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<a href="'+home_page+'">'+upPageWord+'</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a>'}}}if(mulai>1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}if(mulai>2){html+=' '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+=''+jj+''}else if(jj==1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}if(akhir<maksimal-1){html+=''}if(akhir<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a>'}}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>

Header Ads Widget

How To Add Pagination Widget In Blogger - 2021