Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Page Number Navigation Blogger Valid HTML5

Page Number Navigation Blogger Valid HTML5 Page Number Navigation Blogger Valid HTML5 – untuk yang mengalami masalah validasi HTML5 pada widget number navigation yang terdapat pada bagian bawah list post homepage, berikut tutorial yang akan saya bahas pada tutorial ini agar nanti pada saat validasi HTML5 tidak terdeteksi masalah error pada widget number navigation. Pada saat validasi biasanya dibagian page number terdeteksi error pada kode & yang terdapat pada JS, sedangkan untuk mengatasi masalah tersebut sangatlah sepele dan bisa langsung kita atasi dengan mudah. Berikut cara sederhana untuk mengatasi page number navigation yang belum valid HTML5. Cari bagian kode & yang terdeteksi error lalu jika sudah ditemukan ganti dengan kode &, kode tersebut biasanya tidak hanya satu namun ada beberapa kode. Selanjutnya ubah pada keseluruhan kode yang di perlukan agar tidak terjadi lagi error saat validasi HTML5. Atau jika ada yang belum memasang dan ingin menggunakan widget number navigation pada blog berikut cara membuat Page Number Navigation Blogger Valid HTML5.

1. Login ke akun blogger lalu masuk ke Edit HTML template.
2. Copy kode CSS berikut ini lalu taruh 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}
3. Selanjutnya cari kode berikut ini.
<b:section class='main' id='main' showaddelement='no'>
...............................................
</b:section>
Tampilan lengkapnya kode tersebut seperti pada screenshot dibawah ini Page Number Navigation Blogger Valid HTML5 4. Lalu copy kode berikut ini kemudian paste di bawah 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>
5. Terakhir Simpan template.

Selesai sudah untuk membuat Page Number Navigation Blogger Valid HTML5, dan apabila ingin merubah warna pada widget silahkan kreasikan sendiri pada bagian CSS.

Berlangganan artikel via email

35 Response to "Page Number Navigation Blogger Valid HTML5"

PERTAMAX mas, diamankan dulu, hehe

kunjungan malam mas

Balas

punya saya sudah page number ya mas, template yang bluesforyou

Balas

Berhasil nihh kang, nuhun kang.. Kang req cara membuat lightbox evolution tp bukan buat gmbar.

Balas

info baru nih,,,ijin save dulu buat jaga-jaga nanti,,,Terimakasi mas Andes intuk tutor yang satu ini,,,,,,,,,,,,,,,,,,,,

Balas

ijin bookmark ka ;) makasih artikelnya

Balas

ke-limaxx.....wah tipsnya bagus Kang..valid HTML5 lagi...

Balas

Saya dapat bensin nih kayaknya :)
Keren mas... udah valid HTML5

Balas

blog saya belum menggunakan navigasi ini, saya simpen dulu mas biar aman :)

Balas

mantaf infonya mas, menyimak saja

Balas

kebetulan blog saya nggak pakai page number mas pada halaman posting. jadi saya hanya bisa nyimak aja mas hehehe ^^
terimakasih mas andes atas tutorialnya. salam hormat buat semuanya :)

Balas

Saya cuma kebagian solar kayaknya nie :D
bukan keren lagi mas tapi top markotop kalo dah valid HTML5 :)

Balas

Selamat dini hari mas andes, ijin menyimak dan ijin bookmark ya :)

Balas

saya juga ijin bookmark dulu mas Andes, kapan-kapan coba saya praktekkan, makasih mas :)

Balas

simpen dimana kang, hati-hati entar ada yang ambil hehe...

Balas

monggo silahkan mbak Dwi,,,( mewakili mas Andes hihi )

Balas

janji yah kapan-kapan ,ojo lali mas hihi

Balas

yg blum ada page navigasinya silahkan pasang..punya saya udah ada. Hihi..
Thanks mas atas tutornya kmrin..and it work.

Balas

Sangat bermanfaat mas :)

Balas

aku benar-benar nggak ngerti mas...maaf ya

Balas

udah bs mas saya ulik sndiri hehe

Balas

simpen di dalam kulkas saja mas ,,,,

Balas

wah bagus sob kalo valid html 5 next kapan - kapan bisa dicoba nih :)



admin " Variasi Blogger "

Balas

Mantap mas .. dengan page navigasi jadi makin memudahkan menelusuri ditambah tampilan elegant wah pokoke mantapzzz

Balas

waduh kang Marnes lagi makan sahur yah dini hari

Balas

Saya templatenya masih asal-asalan nie Mas, belum pakek template valid HTML 5. Masih awam juga dengan template tipe jenis ini

Balas

keren gan ijin coba yah :)

Balas

makasih tutorialnya, tidak berhasil gan
http://yoga-tc.blogspot.com/

Balas

selamat malam mas Andes, lama gak berkunjung kesini makin keren ganteng aja mas tampilan blog nya, oya sekalian ijin praktek page number navigasinya mas

Balas
This comment has been removed by the author.

alhamdulillah sukses gan saya terapkan di template blog saya, terima kasih ya semoga agan sukses, amin... ^_^
blogwalking: suryapersonal.blogspot.com

Balas

nggak bisa mas bero!

Balas

mantap mas.. saya lsg pake

Balas

mas kalau blog saya di buka di hp pagenumbnya gak mau jalan. muter terus?
itu kenapa mas?

dibuka home terus di next bisa ke page 2.. di next lagi balik ke page 2.
mohon bantuannya mas

Balas

hy brother. i applied your template "bluesforyou" on my blog . but it does not show page numbers navigation in label posts. it shows only 20 posts under each label. there is no option of next page .. can you please help me ????

Balas

udh saya coba kok gk bisa ya gan, apa mungkin tema blogger saya gk bisa di ksih page number

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Page Number Navigation Blogger Valid HTML5" ini bermanfaat, share ke jejaring sosial.
Konversi Kode