Cara membuat Nomor Navigasi Halaman Valid HTML5 Di Blogger

Pada kesempatan kali ini seosc akan membagikan artikel tentang Cara membuat nomor navigasi halaman valid HTML5 di blogger. Untuk kegunaannya adalah untuk menampilkan jumlah halaman blog dan tombol link halaman yang akan dipergunakan untuk menampilkan postingan pada blogger atapun website dan fungsinya adalah untuk memudahkan pengunjung melihat postingan-postingan sebelumnya.

Pada navigasi halaman ini sudah valid HTML5 sehingga sangat cocok untuk teman-teman yang mencari valid 100 di template teman-teman. Untuk teman-teman yang tidak sabar untuk memasang nomor navigasi halaman ini silahkan ikuti langkah-langkahnya dibawah ini.

Cara Pemasangan
Untuk cara pemasangannya dibawah ini sudah di urutkan secara rapi dan jelas:
1. Login ke Blogger.
2. Setelah itu klik Template.
3. Dan klik Edit HTML.
4. Cari kode ]]></b:skin> setelah menemukan kodenya silahkan letakkan kode dibawah ini diatas kode ]]></b:skin>.

.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} 

5. Setelah cara diatas anda lakukan selanjutnya anda cari kode dibawah ini:

<b:section class='main' id='main' showaddelement='no'>
...............................................
</b:section>

Gambarannya adalah seperti di gambar dibawah ini

6. Setelah itu letakkan kode dibawah ini dibawah kode </b:section> :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
&lt;script type='text/javascript'&gt;
var home_page_url = location.href;
var pageCount=15;
var displayPageNum=10;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1);var title = post.title.$t;if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; }if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; } }itemCount++;}for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } fFlag++; } if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;}else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }}if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt;Pages [&#39;+(postNum-1)+&#39;]&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; }if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; }for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; }if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; }if(blogPager){ blogPager.innerHTML = html; }} function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;; thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; }}itemCount++;} for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }fFlag++;} if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;; }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }} if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ if(!isLablePage){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }else{ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }} html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt; page(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; } for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; } if(blogPager){ blogPager.innerHTML = html; }} &lt;/script&gt; &lt;script&gt; var thisUrl = home_page_url; if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){ if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;amp;max&quot;)); }} var home_page = &quot;/&quot;; if (thisUrl.indexOf(&quot;?q=&quot;)==-1){ if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }}
&lt;/script&gt;
</b:if>
</b:if>
</b:if>

 7. Selanjutnya simpan Template anda.

hanya itu yang dapat seosc bagikan kepada anda,apabila ada kesalahan dalam penulisan mohon maaf. sekian untuk hari ini.
 Selamat Mencoba.....