All kinds of blogs / websites are required to be added to a Page Number Navigation. Because to visit the blog post from one page to another page, Page Number Navigation need to use. As a result, your blog will be more attractive.Without Page Number Navigation, this means that your blog will not be perfect.
Indeed, visitors to the blog will find it helpful having Page Number Navigation. Therefore, it must be added in order to create a quality blog. I have already had such a Page Number Navigation Widget in one of the posts. Today, I am going to share in details.
How to add?
- Please login first into Blogger dashboard.
- Then Template> click Edit Html.
- And from the keyboard by pressing Ctrl + F search id='nextprev'> portion, you will see the following code like the image.
- Mark is now within the figure, by clicking on the arrow pointed spot you will see the code like below.
- In the above figure, at the end of the line marked by the yellow and black sign, add the following codes. (press “Enter” button to create a new line.)
<b:includable id='page-navi'> <div class='pagenav'> <script type='text/javascript'> var pageNaviConf = { perPage: 5, numPages: 4, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" } </script> <script type='text/javascript'> //<![CDATA[ function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})(); //]]> </script> <div class='clear'/> </div></b:includable>
- Again, from the keyboard by pressing Ctrl + F search <!-- navigation --> part, you will see the following codes.
<!-- navigation --><b:include name='nextprev'/>
- Replace the above codes with the following codes.
<!-- navigation --><b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi'/> <b:else/><b:if cond='data:blog.homepageUrl != data:blog.url'><!-- navigation --> <b:include name='nextprev'/> </b:if></b:if></b:if>
- Back to the keyboard by pressing Ctrl + F search ]]></ b: skin> section.
- Now paste the CSS codes above the ]]></b:skin> tag
/* Page Number-------------------------------------------------------- */.pagenav{clear:both;margin:-5px 0 10px;margin-top:10px;padding:10px 0;text-align:center;font-size:13px;font-family:'Open Sans';font-weight:400;border:1px solid #93DAF8;border-radius:2px}.pagenav span,.pagenav a{padding:6px 15px;display:inline-block;background-color:#fff;color:#666;border:1px solid #BCCFCD;border-radius:2px;margin:0 5px;transition:initial;text-decoration:none;font-weight:bold}.pagenav .pages{background-color:transparent;color:#666;font-weight:400;text-transform:uppercase;font-size:11px;font-weight:bold;padding:7px 15px}.pagenav a:hover{background-color:#fdfdfd;color:#f53b3b;transition:initial}.pagenav .current{background-color:#f53b3b;color:#fff;border:1px solid #F53B3B}
- Finally, click on Save Template to apply changes.
