Navigasi halaman merupakan bagian dari internal link (tautan internal) yang dianjurkan oleh Google. Fungsinya untuk memudahkan user mengeksplorasi konten blog kita.
Secara default Nagivasi Halaman blog yaitu : Posting Lebih Baru-Beranda-Posting Lebih Lama atau Newer Post-Home-Older Post.
Langkah-Langkah Memasang Navigasi Halaman dengan Nomor Angka di blog
- Pada dasbord blog, klik "Tema" atau "Template"
- Kemudian klik "Edit Tema"
- Langkah selanjutnya, silahkan anda ikuti langkah di bawah sesuai dengan model Navigasi Halaman yang anda inginkan
Model 1 :
- Cari kode ini : ]]></b:skin>
- Simpan kode berikut di atas kode ]]></b:skin>
.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} @media screen and (max-width:384px) { .post{padding:10px;margin:0 0 10px} .post-info {margin: 10px;padding: 10px 0;} .post-thumbnail img{width:100%;padding: 0;margin: 0 0 10px 0;} .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;} } @media screen and (max-width:885px){ .post-outer{margin:5px 5px 0 0;} } @media screen and (max-width:800px){ .post-outer {width:49% !important;height:auto;float:left} .post h2 {font-size:13px;} } @media screen and (max-width:600px){ .post-outer {width:100% !important;float: none !important;margin-top:5px;} .post h2 {font-size:13px;height:auto} } - Cari kode :
<b:includable id='nextprev'>
Kode tersebut selengkapnya seperti ini :
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:if>
</b:includable>
Simpan kode berikut di bawah kode
<b:includable id='nextprev'>....</b:includable>
<b:includable id='nextprev'>....</b:includable>
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
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>
</b:includable>
Silahkan rubah kode yang diberi warna merah sesuai keinginan pada :
- var perPage=5; untuk menampilkan jumlah artikel setiap halaman
- var numPages=6; untuk menampilkan jumlah halaman
<b:include name='nextprev'/>
Hapus Kode : <b:include name='nextprev'/> dan ganti dengan kode berikut :
<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 komentar:
Posting Komentar
Silahkan tulis komentar / saran-sarang yang membangun di sini !