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.
Selanjutnya, klik simpan untuk menyelesaikan rangkaian penerapan navigasi halaman ini.
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.
0 komentar:
Posting Komentar