Cara Membuat Pagination Number Valid HTML 5 di Blog

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