Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Wednesday 16 March 2016

How to Add Numbered Page Navigation Widget to Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add a Number Page Navigation widget to the Blogger blog with pictures.
Add Numbered Page Navigation Widget to Blogger

Why we need to add Numbered Page Navigation widget to the blog?

Numbered Page Navigation is a function to use for navigating to the next blog pages or posts, in the blogger platform, there are only two options in the navigation function like- next page and previous page but if we want to jump into two or third page and any random page we cannot jump there.

But using the number page navigation widget we can enable to display number page navigation function to our blogger blog then any user can jump to any random blog pages, now let's start.

These are the Following Steps:-
Step 1: First go to the blogger blog dashboard and click the Theme option then click the Customise dropdown button and select the Edit HTML option.
Add Numbered Page Navigation Widget to Blogger 1
Step 2: Now click anywhere in the code and press the Ctrl+F button and find out the "]]></b:skin>" code then make some space above the code and paste your selected number page navigation widget code. Click here for number page navigation widget code.
Add Numbered Page Navigation Widget to Blogger 2
Step 3: Here again, press the Ctrl+F button and find out the "</body>" tag then makes some space above the body tag and paste the second code, and at last click the Save button.
Add Numbered Page Navigation Widget to Blogger 3
Numbered Page Navigation widget </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: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enable Numbered Page Navigation widget, if you are thinking to set up a numbered page navigation gadget in your blog then first look at the widget how it looks like in the demo blog.

32 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. 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
    2. 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