Cara Membuat Page Number Navigasi Seperti di Wordpress pada Blogger

Sesuai dengan gambar diatas. Kali ini, saya akan membagikan cara membuat Page Number Navigasi di Blogger. Fungsi dari Page Number Navigasi ini adalah untuk melihatkan artikel selanjutnya dan artikel sebelumnya. Page Number Navigasi ini seperti gaya WP-PageNavi (WordPress) Sekarang kita dapat gunakan pada Blogger. Biasa Page Number Navigasi ini tergantung jumlah postingan yang akan ditampilkan. Jadi misalkan anda menampilkan Artikel anda hanya 6 Buah Artikel pada HomePage. Maka Tugas dari Page Number Navigasi inilah Melihat Artikel Selanjutnya.

Baca Juga :

• Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy

Selain berfungsi Untuk melihat Artikel selanjutnya pada Blog. Fungsi Page Number Navigasi ini adalah untuk mengganti Link postingan lama atau postingan baru yang terdapat pada bawah postingan blog halaman utama. Dengan dipasangnya Page Number Navigasi ini kemungkinan Pengunjung bisa bebas memilih dan melihat halaman postingan yang ingin mereka baca. Jadi pungunjung bisa melompat dari Page 1 ke Page 2 dan Seterusnya. Saya rasa cukup ya pengertian dan fungsi page number navigasi ini, langsung kita bahas saja cara membuatnya..

Cara Pertama :

1. Buka Blogger - Kemudian Anda Login.
2. DashBoard - Template.
3. Edit HTML.

Proses Pembuatan, Ikuti langkah-langlah berikut :

1. Jika anda ingin melihat Sumber Source kode, ini adalah dari Blog Vietnam Hontap. Jadi saya hanya menerjemahkan saja.
2. Silakan anda Temukan kode ]]></b:skin> atau </style> 
3. Copy & Paste kode berikut ini, dan Letakkan tepat diatas kode ]]></b:skin> atau </style>

.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;}
.pagenavi .current{color:#fff !important;background-color:#555;}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;}
.pagenavi .pages {margin:0 -1px 0 0}

4. Temukan lagi kode :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
Atau
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
5. Copy & Paste kode berikuti ini, dan Letakkan dibawahnya

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

6. Cari(CTRL+F) kode <b:include name='nextprev'/>
7. Copy & Paste kode berikut ini, dan Ganti kode tersebut lalu ganti dengan kode dibawah 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>

8. Selesai, Silakan Simpan Template.

Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Page Number Navigasi Seperti di Wordpress pada Blogger

Share this post

Related Post