Tombol Next Page Blogger Dengan Angka

Tombol Next Page Blogger Dengan Angka berikut adalah cara mengganti halaman baru ke halaman lama di blogspot yang ringan simple dan keren yang mungkin bisa menjadi alternatif memindah atau mengganti halaman dengan urutan angka

Banyak alternativ cara dan model pagenave ini tergantung anda akan memasangnya untuk situs apa karena pagenav akan tampak di hompage jadi harus menyesuaikan dengan template dan situs.

1. Buka dasbord blogger
2. Pilih tema dan klik edit HTML
3. Tekan ctrl + f cari dan letakan kode di bawah ini di </style> atau ]]></b:skin>

<!-- CSS Tombol Next Page Dengan Angka -->
#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}#blog-pager2{clear:both;text-align:center;padding:7px;overflow:hidden}
.blog-pager{background:none}
.displaypageNum a,.showpage a{padding:5px 10px;margin-right:5px;color:#fff;background-color:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}
.pagecurrent{padding:5px 10px;margin-right:5px;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}
.displaypageNum a:hover,.showpage a:hover{background:#000;text-decoration:none;color:#fff}
.pagecurrent{background:#000;text-decoration:none}
#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:bold;color:#fff}
#blog-pager .pages{border:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}
#blog-pager a{margin:0 5px 0 0;padding:2px 10px 3px;text-decoration:none;color:#fff;background:#2973fc;-moz-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:hover{color:#fff;text-decoration:none;background:#000}
#blog-pager-older-link,#blog-pager-newer-link{float:none}

Selanjutanya kita tinggal menambahkan kode di bawah ini dan letakan di atas kode </body>

<!-- Javascript Tombol Next Page Dengan Angka -->
<script type="text/javascript">
            //PageNavi_Blogger.defaults["perPage"] = 10;
            //PageNavi_Blogger.defaults["numPages"] = 5;
            //PageNavi_Blogger.defaults["window_width"] = 320;
            PageNavi_Blogger.all(["blog-pager","blog-pager2"]);;
        </script>
<script type='text/javascript'>
//<![CDATA[
if("undefined"==typeof PageNavi_Blogger)var PageNavi_Blogger=function(){function m(b,a,c,d){return'<span class="displaypageNum"><a href="#" onclick="PageNavi_Blogger.buttuns.paginavi_redirect('+b+","+a+",'"+c+"');return false">"+d+"</a></span>"}function n(b,a,c,d){c?b.push('<span class="displaypageNum"><a href="/search/label/'+c+"?max-results="+a+'">'+d+"</a></span>"):b.push('<span class="displaypageNum"><a href="/">'+d+"</a></span>")}function l(b){var a=document.createElement("script");a.type="text/javascript";
a.setAttribute("src",b);document.getElementsByTagName("head")[0].appendChild(a)}var k={defaults:{perPage:5,numPages:5,prevText:"u00ab",nextText:"u00bb"},call_back:{totalcountdata_outside:function(b,a){return function(c){var d=parseInt(c.feed.openSearch$totalResults.$t,10);c=k.defaults.perPage;var e=k.defaults.numPages,f=k.defaults.prevText,p=k.defaults.nextText,h=[],g=parseInt(e/2);g==e-g&&(e=2*g+1);g=a-g;1>g&&(g=1);d=Math.ceil(d/c);e=g+e-1;e>d&&(e=d);1<g&&n(h,c,b,"1");if(2<g){var l=parseInt(a)-
c;2>l?n(h,c,b,f):h.push(m(l,c,b,f))}for(f=g;f<=e;f++)a==f?h.push('<span class="pagecurrent">'+f+"</span>"):1==f?n(h,c,b,"1"):h.push(m(f,c,b,f));e<d-1&&a<d-1&&(f=parseInt(a)+c,f>d&&(f=d),h.push(m(f,c,b,p)));e<d&&h.push(m(d,c,b,d));c=h.join("");if(p=document.getElementById("blog-pager"))p.innerHTML=c}},paginavi_finddatepost_outside:function(b,a,c){return function(d){d=d.feed.entry[0];var e=encodeURIComponent(d.published.$t.substring(0,19)+d.published.$t.substring(23,29));d="/search/label/"+c+"?updated-max="+
e+"&max-results="+a+"#PageNo="+b;e="/search?updated-max="+e+"&max-results="+a+"#PageNo="+b;location.href=c?d:e}}},buttuns:{paginavi_redirect:function(b,a,c){"undefined"==c&&(c=!1);finddatepost=k.call_back.paginavi_finddatepost_outside(b,a,c);b=(b-1)*a;l(c?"/feeds/posts/summary/-/"+c+"?start-index="+b+"&max-results=1&alt=json-in-script&callback=finddatepost":"/feeds/posts/summary?start-index="+b+"&max-results=1&alt=json-in-script&callback=finddatepost")}},all:function(){var b,a;a=location.href;-1!=
a.indexOf("/search/label/")&&(b=-1==a.indexOf("?updated-max")?"?max":"?updated-max",b=a.substring(a.indexOf("/search/label/")+14,a.indexOf(b)));-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(a=-1==a.indexOf("#PageNo=")?1:a.substring(a.indexOf("#PageNo=")+8,a.length),totalcountdata=k.call_back.totalcountdata_outside(b,a),l(b?"/feeds/posts/summary/-/"+b+"?alt=json-in-script&callback=totalcountdata&max-results=1":"/feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata"))}};return k}();
PageNavi_Blogger.all();
//]]>
</script>

Hasinya lihat di template blog ini.
Isi sebuah blog penting dan tampilan sebuah blog juga harus membuat nyaman para pengunjung.
Semoga bermanfaat. terimakasih