Cara Membuat Tombol Next Page dengan Angka di Blog

Cara Membuat Tombol Next Page dengan Angka di Blog. atau Cara Mengganti Older Post dengan Angka Setalah kami mencoba mengganti template blog ternyata tombol next page pada postingan hilang, hanya ada tombol Older Post dan tombol home dibawah postingan, setelah di cek beberapa kali memang pada template yang kami gunakan tidak ada script untuk tombol next page nya, kemudian kami mencari script/kode untuk membuat tombol next page dan ternyata tidak ada satupun yang cocok dengan template blog saya.

Lalu kami mencoba untuk melihat code html pada template blog yang terdapat tombol next page nya, kami mencoba menerapkan kode tersebut pada template kami yang baru dan ternyata berhasil.

Cara Membuat Tombol Next Page dengan Angka di Blog

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

<b:includable id='page-navi'>
    <div class='pagenavi'>
        <script type='text/javascript'>
        var pageNaviConf = {
            perPage: 7,
            numPages: 9,
            firstText: &quot;First&quot;,
            lastText: &quot;Last&quot;,
            nextText: &quot;Next&quot;,
            prevText: &quot;Prev&quot;
        }
        </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 == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<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.

 /* 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.

Berbagi :