How to Create Numbered Page Navigation in Blogger

How to Create Numbered Page Navigation in Blogger

In a Blogger template, we can set page number navigation, It is essential for a Blogger Blog.When you post more articles,  then you should do it manually.

It helps visitor jump from one page to another page or click on a specific page and know the total number of posts Published.

Hopefully, you can setup your page number in blogger blog by following this post.

Today we will see how to add a nice page number navigation hack blogger.


You can add this by following two steps.
1. Adding The CSS.
2. Adding the JavaScript.

Now let's see how to do it.

Adding the CSS



Firstly go to Blogger Dashboard> Theme> Click on the Edit HTML Button.

How to Create Numbered Page Navigation in Blogger

Now ,click CTRL+F key functions and  enter below html tag and press enter . 


]]></b:skin>

How to Create Numbered Page Navigation in Blogger


Above the  ]]></b:skin>   ,paste the Below CSS style code.


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}


2. Adding the JavaScript.




Now search for </BODY> Tag ,Just above it ,paste the following 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>

Now you are done for setup page number navigation.


Comments

Post a Comment

Most Useful Articles

How to Make Blogger BlogSpot Layout As Responsive Template

Image
How to Make Blogger BlogSpot Layout As Responsive Template Are you working on Blogger BlogSpot?As we all know, BlogSpot Layout is not Responsive but still using Blogger, Here is a solution to make a Blog mobile Friendly Template and responsive layout. There are two ways to make your Blogspot Responsive, so simply follow these steps to customize Your Blogger Blogspot Template. As well, you can use  recently Blogspot Introduced New Responsive themes or mobile-friendly templates to make your blog responsive. 1.First Way to make BlogSpot as Mobile Friendly Template Go to the Blogger Dashboard and Select the Custom View Button, then  Choose Mobile Theme . Now, go to the Theme and search for the  widget which you want to display in Mobile View . Copy and paste this code into your blog HTML template- <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>   Now Save your Theme a...
Read more

How to Show Blogger Widgets in Mobile View with Simple Steps

Image
How to Show Blogger Widgets in Mobile View with Simple Steps Since I don't have any guide to create a blogger when I saw my blog in mobile view, I shocked, some important widgets are missing, I asked my self why widgets are not showing in the mobile template. Then I bit confused. As we all know, today's most content search visitors are from Mobile devices than common laptops and desktops. So showing widgets on mobile templates must. I felt very bad for now seeing my blogger widgets in mobile view. To increase the blog traffic from mobile view, we have to show them at least popular posts widget, about us widget and Facebook like the page. These are the most important things for every blogger to satisfy the blog visitors and to increase visitor interest. Finally, I got a solution that is useful. After knowing it, laughing myself because it is very simple to show blogger widgets in the mobile template with simple steps. As I have learned this trick, to help new blogg...
Read more

How to Create Internal Links within The Post in Blogger

Image
How to Create Internal Links within the post in Blogger To reduce the difficulty when users reading very lengthy posts, it is better to create internal links within the post  to jump to the matter which is interested in him. So thus we can decrease user efforts by creating bookmarks and when we are clicking on it, directly goes to its header. Thus anchor links are useful for viewers to read long post interestingly. Automatic internal links in blogger For achieving an  On-Page SEO strategy, we have to create automatic internal links in blogger. Here, you have to understand what is internal linking?. Using the  link strategy , you can increase on- SEO optimization. Visitors can get more deep information from visited to navigate through other related content. It increases your site and posts SEO performance. You can provide in-depth content for blog readers.  Two types are: Internal Internal linking is we are linking our own blog referred posts with anchored...
Read more

How to Display Blogger Posts in Grid View with Thumbnails

Image
How to Display Blogger Posts in Grid View with Thumbnails In a Blogger, as a default, all posts are showing top to bottom in the lengthy bar But here I am sharing Grid view with thumbnails for the blogger posts on the home page and related posts in the short view which reduces users difficulty to show all posts in the grid view which user can select his required post immediately and he will put more interest on the additional posts if he needs. Grid view attracts more visitors and increases the views of our blogger posts. Thumb nails also play a very important role in what is the post in the one view. So you might have known list view templates in the grid style. In my opinion, you have to reduce the complex long scrolling problems for page visitors to choose an interesting article. In the below image, you can see the grid view with thumbnail posts. Start Adding Grid view to Blogger Posts Now, Go to the Blogger Dashboard ->Click on Theme Button->choose the EDIT H...
Read more

How to Get Back A Hacked Facebook Account and Secure within 10 Steps

Image
How to Get Back A Hacked Facebook Account and Secure within 10 Steps One Day, My friend Asked Me that His account is hacked and its password email id setting also has been changed. On that question, I have started writing this Post to get back Hacked Facebook Account and Secure with the following Steps. How to Increase Organic Reach on Facebook How to Get More Likes On Facebook Fan Page How Many Ways Can I Earn Money from Facebook How to Set Up Facebook Business Manager : FBM Tutorial How to Share Your WhatsApp Status Updates to Facebook Stories and Other Apps  Some of my friends asked me, can we recover my  FB Account without email or can we get back my id  through friends' Facebook Id or Gmail, is it possible to use an old password? Another one posted to me that His email also had been changed, he asked? what can I do? , and  Password to be changed. My neighbor asked, his Facebook account Locked and How to delete it? For all these questions, I f...
Read more

Blogger Login Google Account: How to Create a New Google Account(Gmail)

Image
Blogger Login Google Account Creating a free Blogger Blogspot, we need Login Google Account for that we have to create Gmail Account initially, next create Blogger. Keeping the beginner bloggers requirement in my mind, I am sharing this article. Blogger Blogspot whether you are a skilled person or unskilled, you can create a unique and beautiful blog . It’s easy and free. Choose the Blog design theme according to your requirement. Now free responsive and static templates are available from blogger Blogspot. You can get a free domain and if you have good traffic for your Blogspot they will pay you through Google Adsense for your hard work. Google AdSense can automatically display relevant targeted ads on your blog.  You can find the most searched keywords to reach more audiences. You can know more about your blog traffic, where they are coming from, what they are searching for about your posts through Google Analytics . You can use a blogger for posting yo...
Read more