Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

10 komentar untuk "Cara Membuat Tombol Next Page dengan Angka di Blog"

  1. main wrapper nya malah hilang gan???

    BalasHapus
  2. kok kaya gini hasilnya gan
    https://fauzulhikmah86.blogspot.co.id/

    BalasHapus
  3. makasih sangat bermanfaat..
    bantu review https://parkirwacana.blogspot.co.id/

    BalasHapus
  4. muncul di home, tp giliran masuk dipostingan artikelnya gak muncul.. haduuh, kenapa ya? ada solusi?

    BalasHapus
  5. error bagaimana gan, harusnya jika di dekstop jalan di hp juga jalan

    BalasHapus
  6. template saya dari download jadi bingung naruh skrip nya dimana...
    tadi dah saya coba tp nya salah(teks merah)
    gimana min???

    BalasHapus
  7. lu aja gapake der, tapi kasi tutorial, ga work hmm

    BalasHapus
    Balasan
    1. ga pake bagaimana? itu di halaman utama saya pake

      Hapus
  8. min malah hilang postingan nya, sesuai petunjuk sudah saya lakukan salamdari https://www.7download.site

    BalasHapus
    Balasan
    1. Bantu jawab lur yg postingannya ilang bisa cek di disini caranya, sekedar membantu
      https://www.bungfrangki.com/2015/05/membuat-navigasi-halaman-dengan-angka.html

      Hapus