Cara Membuat Page Navigation Valid HTML5

Page navigation Valid HTML 5

Navigasi halaman (Page Navigation) berfungsi untuk memudahkan pengunjung melihat daftar artikel blog anda dari yang terbaru hingga artikel yang telah anda buat sebelumnya, bahkan sampai artikel yang pertama anda buat.

Page Navigation ini juga berguna agar daftar artikel tidak memanjang ke bawah dan membatasi tiap-tiap artikel perhalaman agar blog terlihat lebih rapi dan tentunya page navigation ini sudah valid HTML5, untuk anda yang belum paham apa itu HTML5 simak dulu artikel Arti HTML dan HTML5 sebelum menerapkan kode dibawah ini.

Langkah-langkah:


Seperti biasa, login ke blogger dan buka template editor, untuk meyakinkan kode ini bekerja, anda boleh backup terlebih dahulu template yang anda gunakan saat ini. Berikut kode CSSnya:

/* Navigasi Halaman */
.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}

Masih ditemplate editor carilah kode berikut:

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

Jika sudah ketemu letakan kode ini tepat dibawah kode yang anda cari diatas:

<b:includable id='navi-pager'>
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 6,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot; &#9658; &quot;,
prevText: &quot; &#9668; &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>

Dari penggabungan kode diatas, maka hasilnya akan tampak seperti berikut:

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='navi-pager'>
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 6,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot; &#9658; &quot;,
prevText: &quot; &#9668; &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>

Kode yang ditandai merah adalah kode yang anda cari tadi

Tetap di template editor, sekarang cari dan hapus kode berikut:

<b:include name='nextprev'/>

Sebagai pengganti kode yang dihapus tadi letakan kode dibawah 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>

Simpan template setelah anda menerapkan kode-kode di atas ke dalam template, review hasilnya di blog anda dan cek dengan mengklik bagian navigasi halaman yang telah anda terapkan untuk memastikan kode tersebut bekerja.

Demikian Cara membuat Navigasi halaman yang valid HTML5, sesuaikan warna kode diatas sesuai template yg anda gunakan.
Advertisement
Advertisement

Tidak masalah seberapa lambat kau berjalan, asalkan kau tak berhenti.