Pada kali ini saya akan membagikan tutorial pagination number valid html 5 yang bisa sobat coba, tentu dengan membuat valid html 5 dapat membuat blog menjadi lebih bagus lagi dari segi strukture atau kerangka blog.
Nah bagi sobat yang ingin merubahnya bisa langsung baca selengkapnya dibawah ini
Cara Membuat Pagination Number
Pertama buka Blog > klik Tema > klik Edit HTML
Kedua tambahkan kode css berikut ini lalu taruh tepat diatas kode </style>
.showpageArea{position:relative;display:block;padding:0;margin:0 7px 40px 0}
.showpageArea a{position:relative;background:#111;color:#fff;padding:10px;top:0;float:left}
.showpageOf,.showpagePoint{position:relative;color:#63C4F1;background:#111;padding:10px;float:left}
.showpageOf{display:none;float:right}Ketiga copy kode berikut ini kemudian paste diatas kode </body>
<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
varhome_page_url=location.href;
varpageCount=15;
vardisplayPageNum=10;
varupPageWord='Previous';
vardownPageWord='Next';
functionshowpageCount(json){varthisUrl=home_page_url;varhtmlMap=newArray();varthisNum=1;varpostNum=1;varitemCount=0;varfFlag=0;vareFlag=0;varhtml='';varupPageHtml='';vardownPageHtml='';for(vari=0,post;post=json.feed.entry[i];i++){vartimestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);vartitle=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum;}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount;}}itemCount++;}for(varp=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<spanclass="showpage"><ahref="/">'+upPageWord+'</a></span>';}else{upPageHtml='<spanclass="showpage"><ahref="'+htmlMap[p]+'">'+upPageWord+'</a></span>';}fFlag++;}if(p==(thisNum-1)){html+='<spanclass="showpagePoint">'+thisNum+'</span>';}else{if(p==0){html+='<spanclass="showpageNum"><ahref="/">1</a></span>';}else{html+='<spanclass="showpageNum"><ahref="'+htmlMap[p]+'">'+(p+1)+'</a></span>';}}if(eFlag==0&&p==thisNum){downPageHtml='<spanclass="showpage"><ahref="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++;}}}if(thisNum>1){html=''+upPageHtml+''+html+'';}html='<divclass="showpageArea"><spanclass="showpageOf">Pages['+(postNum-1)+']</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml;}if(postNum==1)postNum++;html+='</div>';varpageArea=document.getElementsByName("pageArea");varblogPager=document.getElementById("blog-pager");if(postNum<=2){html='';}for(varp=0;p<pageArea.length;p++){pageArea[p].innerHTML=html;}if(pageArea&&pageArea.length>0){html='';}if(blogPager){blogPager.innerHTML=html;}}functionshowpageCount2(json){varthisUrl=home_page_url;varhtmlMap=newArray();varisLablePage=thisUrl.indexOf("/search/label/")!=-1;varthisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;varthisNum=1;varpostNum=1;varitemCount=0;varfFlag=0;vareFlag=0;varhtml='';varupPageHtml='';vardownPageHtml='';varlabelHtml='<spanclass="showpageNum"><ahref="/search/label/'+thisLable+'?&max-results='+pageCount+'">';varthisUrl=home_page_url;for(vari=0,post;post=json.feed.entry[i];i++){vartimestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);vartitle=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum;}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;}}itemCount++;}for(varp=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>';}else{upPageHtml='<spanclass="showpage"><ahref="'+htmlMap[p]+'">'+upPageWord+'</a></span>';}fFlag++;}if(p==(thisNum-1)){html+='<spanclass="showpagePoint">'+thisNum+'</span>';}else{if(p==0){html=labelHtml+'1</a></span>';}else{html+='<spanclass="showpageNum"><ahref="'+htmlMap[p]+'">'+(p+1)+'</a></span>';}}if(eFlag==0&&p==thisNum){downPageHtml='<spanclass="showpage"><ahref="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++;}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+''+html+'';}else{html=''+upPageHtml+''+html+'';}}html='<divclass="showpageArea"><spanclass="showpageOf">page('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml;}if(postNum==1)postNum++;html+='</div>';varpageArea=document.getElementsByName("pageArea");varblogPager=document.getElementById("blog-pager");if(postNum<=2){html='';}for(varp=0;p<pageArea.length;p++){pageArea[p].innerHTML=html;}if(pageArea&&pageArea.length>0){html='';}if(blogPager){blogPager.innerHTML=html;}}</script><script>varthisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){varlblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));}else{varlblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));}}varhome_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<scriptsrc="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"></script>')}else{document.write('<scriptsrc="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999"></script>')}}
//]]>
</script>
</b:if>Terakhir simpan tema
Bagaimana mudah sekali untuk merubah menjadi valid html 5
