Cara Membuat / mengganti Tombol Next Page dan Older Post dengan Angka keren di Blog

Cara Membuat / mengganti Tombol Next Page dan Older Post dengan Angka keren di Blog.

Tombol next page ini sama fungsinya dengan tombol next page, previous, dan home yang terdapat pada bagian bawah postingan, namun yang satu ini kita merubah itu semua dengan angka, tujuan nya agar para pengunjung lebih mudah menjelajahi isi dari blog sobat. Tombol next page yang satu ini berbeda dengan tutorial blogger lainnya, karena mungkin tutorial ini belum pernah ada yang share.


Cara Membuat Tombol Next Page dengan Angka di Blog Keren

NB : Sebelum Lanjut sebaiknya sobat download dulu Tempate yang sekarang, buat jaga jaga ada kesalah pada saat meletakan kode, baiklah langsung saja

1. Masuk Beranda blogger Klik Template > Edit HTML
2. Cari/Temukan Code <b:includable id='nextprev'> gunakan (CTRL+F) untuk mencari code dengan cepat.
3. Kemudian Salin Dan Paste Code dibawah ini tepat di bawah code <b:includable id='nextprev'>

Baca Juga

• Kelebihan dan Kekurangan Blog Menggunakan Template AMP
• Cara Ampuh Mengatasi Semua Error Structured Data: Image, Author, Updated, Publisher
• Cara Membuat / mengganti Tombol Next Page dan Older Post dengan Angka keren di Blog

<b:includable id='page-navi'> <div class='pagenavi'> <script type='text/javascript'> var pageNaviConf = { perPage: 7, numPages: 9, 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>

4. Cari/Temukan Code <b:include name='nextprev'/> kemudian ganti dengan code dibawah ini

<!-- 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:include name='nextprev'/> </b:if> </b:if> <!-- feed links -->

5. Cari/Temukan Code </style> kemudian Copas kode dibawah ini. dan letakan di atas kode </style>

/* Page Navigation */ .pagenavi { clear:both; margin:-5px 0 10px; text-align:center; font-size:11px; font-weight:bold; text-transform:uppercase; } .pagenavi span,.pagenavi a { padding:6px 10px; margin-right:3px; display:inline-block; color:#333333; background-color:#ffffff; border: 1px solid #dddddd; } .pagenavi .current, .pagenavi .pages, .pagenavi a:hover { border: 1px solid #aaaaaa; } .pagenavi .pages { display:none; }

6. Save Template

Nah gimana sobat blogger cukup mudah kan ? silakan dicoba mudah- mudahan cocok dengan template sobat blogger, jika ada kesulitan silakan tanyakan di kolom komentar.