![Gambar](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY/s113/bungfrangki.jpg)
![Membuat Navigasi Halaman yang Benar dan Valid HTML5](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkbWPOfy_PIoPko-QRPyzQ4o-rZgWiJFhQd2DQcXMAWGoE2nKNXkXh54MsYuSDdJuJIfXZy_ezUT3WqiKJOq_ktM5lvvhr8XjiJfAqja4P_cUC9SvH41udtKEnVx-w_HCdXeB0Gf9vTcb/s1600/blogger-page-navigation-with-number.png)
Membuat Navigasi Halaman yang Benar dan Valid HTML5 – Navigasi halaman atau page navigation adalah salah satu widget blog yang mempermudah pengunjung untuk melihat-lihat artikel terdahulu. Navigasi halaman yang dibagikan kali ini adalah navigasi dengan penomoran halaman dalam masing-masing page. Navigasi halaman ini juga sudah valid HTML5, sehingga bagi yang memvalidasi HTML5 pada templatenya tidak perlu khawatir untuk memasang widget ini.
![Membuat Navigasi Halaman yang Benar dan Valid HTML5 Membuat Navigasi Halaman yang Benar dan Valid HTML5](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkbWPOfy_PIoPko-QRPyzQ4o-rZgWiJFhQd2DQcXMAWGoE2nKNXkXh54MsYuSDdJuJIfXZy_ezUT3WqiKJOq_ktM5lvvhr8XjiJfAqja4P_cUC9SvH41udtKEnVx-w_HCdXeB0Gf9vTcb/s1600/blogger-page-navigation-with-number.png)
Selanjutnya, klik simpan untuk menyelesaikan rangkaian penerapan navigasi halaman ini.
![Membuat Navigasi Halaman yang Benar dan Valid HTML5 Membuat Navigasi Halaman yang Benar dan Valid HTML5](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkbWPOfy_PIoPko-QRPyzQ4o-rZgWiJFhQd2DQcXMAWGoE2nKNXkXh54MsYuSDdJuJIfXZy_ezUT3WqiKJOq_ktM5lvvhr8XjiJfAqja4P_cUC9SvH41udtKEnVx-w_HCdXeB0Gf9vTcb/s1600/blogger-page-navigation-with-number.png)
Membuat navigasi halaman dengan nomor/angka
1. Login ke blogger, lalu kopi css di bawah ini dan letakkan di atas kode </style> atau ]]></b:skin>/* Page Navigation */2. Temukan kode berikut ini
.navipager{clear:both;margin:0;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.navipager span,.navipager a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#9cd9d5;line-height:1.6em}
.navipager .current{color:#fff !important;background-color:#9cd9d5;}
.navipager .current,.navipager .pages{color:#fff !important;background-color:#9cd9d5;}
.navipager a:hover{color:#fff !important;background-color:#f1583b;}
.navipager .pages {margin:0 -1px 0 0}
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>Lalu letakkan kode di bawah ini tepat di bawah dari kode di atas
<b:includable id='navi-pager'>3. Setelah itu, temukan lagi kode di berikut ini
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 6,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: " ► ",
prevText: " ◄ "
}
</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>
<b:include name='nextprev'/>Hapus kode tersebut, dan ganti dengan kode di bawah ini
<b:if cond='data:blog.pageType == "index"'>
<b:include name='navi-pager' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='navi-pager' />
</b:if>
</b:if>
Selanjutnya, klik simpan untuk menyelesaikan rangkaian penerapan navigasi halaman ini.
Baca Juga:
Share this
2 komentar
https://www.blogger.com/profile/05542565535844705557
https://www.blogger.com/profile/13162875744493565460
Image
.pre
,code
, atauquote
.Salin Kode!
lalu paste ke kolom komentar.image quote pre code