cara Dan Teknik terbaru memasang atau membuat Navigasi Halaman Nomor atau Angka (Numbered Page Bavigation) di blogger.
Disebut terbaru alasannya yakni isyarat scriptnya tidak ngelink ke Google Code dan Google Drive yang sudah dilarang Google, sehingga semua isyarat script yang disimpan (di-hosting) di sana tidak work lagi.
Jika isyarat navigasi halaman nomor blog Anda ngelink ke Google Code, dipastikan tidakan muncul. Satu lagi yang baru: navigasi jalaman angka/nomor ini responsive (mobile friendly).
Buka isyarat template Anda dengan klik Template > Edit HTML
cara Dan Teknik Membuat Navigasi Halaman Nomor (Angka)
1. Install CSS styleBuka isyarat template Anda dengan klik Template > Edit HTML
Temukan isyarat ]]></b:skin>
Masukan salah satu isyarat 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 isyarat <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Masukkan isyarat berikut ini sehabis dan sudah atau di bawah isyarat 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 isyarat berikut ini:
<!-- navigation -->
<b:include name='nextprev'/>
Hapus dan Ganti dengan isyarat 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 isyarat <b:include name='nextprev'/>, maka temukan isyarat 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 isyarat berikut ini sempurna di atas tag epilog </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!
Save Template!
Kini widget Navigasi Halaman Nomor/Angka (Numbered Page Navigation) sudah muncul di blog Anda.
Configuration
Perhatikan isyarat 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).*
Cara Dan Metode Menciptakan Navigasi Halaman Nomor (Angka) Di Blogger Terbaru
4/
5
Oleh
Unknown
