September 1, 2016

Cara Membuat Navigasi Halaman Nomor (Angka) di Blogger Terbaru

September 1, 2016

Cara Membuat Navigasi Halaman Nomor (Angka ) di Blogger Terbaru
Cara terbaru memasang atau membuat Navigasi Halaman Nomor atau Angka (Numbered Page Bavigation) di blogger.

Diistilahkan dengan Page Navigation with WP-PageNavi style, navigasi halaman untuk blogger dengan gaya navigasi halaman blog CMS WordPress.

Disebut terbaru karena kode scriptnya tidak ngelink ke Google Code dan Google Drive yang sudah dihentikan Google, sehingga semua kode script yang disimpan (di-hosting) di sana tidak work lagi.

Jika kode navigasi halaman nomor blog Anda ngelink ke Google Code, dipastikan tidakan muncul. Satu lagi yang baru: navigasi jalaman angka/nomor ini responsive (mobile friendly).

Cara Membuat Navigasi Halaman Nomor (Angka)

1. Install CSS style
Buka kode template Anda dengan klik Template > Edit HTML
Temukan kode  ]]></b:skin>

Masukan salah satu kode css berikut ini. Ada dua model, hitam putih dan berwarna.

STYLE-1

/* Page Navigation Model Hitam Putih */
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}
@media screen and (max-width:384px) {
pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px;}
}

STYLE-2

/* Page Navigasi Nomor/Angka model Warna */
.pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#000!important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 10px;margin-right:3px;display:inline-block;color:#000!important;background-color:#fff;border:1px solid #e5e5e5}
.pagenavi .current{color:#000!important;border:1px solid #222}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#000!important;border:1px solid #222}
.pagenavi .pages {display:none}
@media screen and (max-width:384px) {
pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px;}
}

2.  Install script
Temukan kode <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Masukkan kode berikut ini setelah atau di bawah kode tersebut:

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

3. Langkah Berikutnya: Tahap Akhir
Temukan kode berikut ini:

<!-- navigation -->
<b:include name='nextprev'/>

Hapus dan Ganti dengan kode ini:

<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:if>
</b:if>

Tidak Ada?
Jika tidak menemukan kode <b:include name='nextprev'/>, maka temukan kode berikut ini:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

Copas kode berikut ini tepat di atas tag penutup  </b:includable> :

<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:if>
</b:if>

Save Template!
Kini widget Navigasi Halaman Nomor/Angka (Numbered Page Navigation) sudah muncul di blog Anda.  

Configuration

Perhatikan kode berikut ini:

var pageNaviConf = {
    perPage: 5,
    numPages: 9,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

Arti kode:
perPage: jumlah posting tiap halaman
numPages: jumlah nomor halaman navigasi
firstText, lastText, nextText, prevText: teks yang muncul “First”, “Last”, “Next”, “Prev” 

Demikian cara membuat navigasi halaman nomor atau angka (numbered page navigation) di blogger terbaru.

Sumber Delux Blog Tips dengan modifikasi script Google Code yang error by CB Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Membuat Navigasi Halaman Nomor (Angka) di Blogger Terbaru

  1. admin maaf ini udah coba langkah-langkah di atas tapi gak muncul apa2 gak ada perubahan gmna ya?

    saya pake New Johny Wuss V2 - Template Blog SEO Friendly, Fast, Responsive yang di download di sini.

    mohonpencerahannya.

    ReplyDelete
  2. Saya berhasil menerapkan Page Navigation ini di blog saya. Tapi ysng style 2 itu ternyata hitam putih.
    Maksih ya...happy blogging.

    ReplyDelete
  3. Terima kasih, behasil~

    ReplyDelete
  4. Apakah cara ini berfungsi juga untuk versi mobile mas???..

    ReplyDelete

Contact Form

Name

Email *

Message *