Sponsor Post

Best Telegram Groups List Collection - Updated

Wednesday, 16 March 2016

How to Add Page Number Navigation in Blogger with Pictures

Hello friends, welcome to the Techtspot Blogger tutorial today I will show you how to insert add Page Number Navigation to Blogger blog with pictures.
How to Add Page Number Navigation in Blogger with Pictures

Page Number Navigation help to Navigate any blog page and blog post very easily, here Blogger blog have default Page Navigation option like Next page or Previous page option, but I can not jump randomly any pages, so we insert Page Navigation in blog.

These are Following Steps:-


Step 1: Go to Blogger Theme and click Edit HTML button.
Add Page Numbered Navigation To Blogger Blog 1
Step 2: Click in Code and Press Ctrl+F type “ ]]></b:skin> ” hit enter then Paste the first Code above the “]]></b:skin>” tag. Click Here For Page Number Navigation Code.
Add Page Numbered Navigation To Blogger Blog 2
Step 3: Again Press Ctrl+F and type " </body> " Paste second Code before </body>  tag.
Add Page Numbered Navigation To Blogger Blog 3

Page Number Navigation </Body> Code
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=3;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
Step 4: Go to your Blogger Blog.



35 comments:

  1. work nahi ho raha

    ReplyDelete
    Replies
    1. Sir this post or trick can work only http blog connection.

      Delete
    2. very good pro it,s work Thanks

      Delete
    3. how to add more pages than 5

      Delete
    4. you can change the number in this variable var perPage = 3;
      var numPages = 3;

      Delete
  2. it's not woek on blog also

    ReplyDelete
    Replies
    1. Sir this post or trick can work only http blog connection.

      Delete
    2. usme b nahi ho raha hai are bhai video banaye the to usme blog pe jakar button b dikha dete khud ke me b to nhi hai

      Delete
    3. hello sir i update the < body > code now it s work .....

      Delete
  3. i have only error so please help to another way

    ReplyDelete
    Replies
    1. hello there

      only one solution use custom templates ...

      Delete
  4. its work thanks dude now check https://welcomevisetors.blogspot.com/ on my blog

    ReplyDelete
  5. Thank you so much!

    ReplyDelete
  6. Nice bro keep it up it very helpful for me thank you vary much

    ReplyDelete
  7. Its working in my blog
    Link androidgamer78744.blogspot.com

    ReplyDelete
  8. Replies
    1. So dont worry

      You can paste the ii code on the adding CSS option

      1. go to theme link and click customise orange button.

      2. now click 5th link Advanced and scroll up reach the end

      3. Here you click add CSS now paste the II nd code and click apply to blog button and check your blog

      Thanks :)

      Delete
  9. hello sir this is my site https://adnankaif.com/ i am unable to add this code after adding it does not showing anything



    and this is post

    you can check this ...
    plese help me out

    ReplyDelete
  10. Not working brother please see https://www.morepankh.com/ and suggest me best please

    ReplyDelete
    Replies
    1. Hello

      Please use New Blogger theme because some of Blogger theme this trick not work

      thanks

      Delete
  11. Peace be upon you, welcome to your presence in the blog. Learn now and thank you for the nice, beautiful and kind comment that filled us with enthusiasm and joy. Really very happy for you! We wish you good luck! We are always happy to follow our topics and get to know your opinions, views and even your opinions, so that we can always present everything that is useful!
    We chose an article for you related to the previous article: But this time it talks about SEO and backlink tips to improve your website's ranking in search results.
    I am very interested in your opinion, our esteemed professors, and I thank you very much

    Article link
    : https://the0health1.blogspot.com/2021/03/backlink-search-engines.html

    ReplyDelete