OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Advertise With Us
  • Newsletter
Facebook Twitter Instagram
Oscarmini Oscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Blogging»How to Add Page Number Navigation in Blogger
Blogging

How to Add Page Number Navigation in Blogger

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

It is every bloggers dream to have the best design in his/her niche. Well customizing your Navigation pattern from the normal “Older Post” and “Newer Post” patter to something more testy isn’t such a bad idea.

In this post, i’ll be teaching you how to replace normal blogger Naigation pattern to a Page Numbered Naigation.

How to add Numbered Navigation to blogger

blogger page navigation

1 . Log in to your blogger account > Go to Design > Page Element.

2. Click on Add Gadget and select ‘HTML/Javascript’

3. Now paste this code in the form that pops up

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {border:1px solid #aeaeae;margin:0 3px;padding:3px 7px;text-decoration:none;}.showpageNum a:hover {background-color:#0a8be5;border:1px solid #000000;}.showpagePoint {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#aeaeae none repeat scroll 0 0;border:1px solid #aeaeae;color:#333333;margin:0 3px;padding:3px 7px;text-decoration:none;}.showpageOf {margin:0 3px 0 0;padding:3px 7px;text-decoration:none;}.showpage a {border:1px solid #aeaeae;padding:3px 7px;text-decoration:none;}.showpage a:hover {text-decoration:none;}.showpageNum a:link, .showpage a:link {color:#333333;text-decoration:none;}</style><script type='text/javascript'>var home_page_url = location.href;var pageCount= 1 ;var displayPageNum= 3 ;var upPageWord ='Previous';var downPageWord ='Next';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= '';var upPageHtml ='';var downPageHtml ='';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!=''){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){ thisNum = postNum;}if(title!='') postNum++;htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;}}itemCount++;}for(var p =0;p< htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&& p<(thisNum+displayPageNum)){if(fFlag ==0 && p == thisNum-2){if(thisNum==2){upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';}else{upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}fFlag++;}if(p==(thisNum-1)){html += '<span class="showpagePoint">'+thisNum+'</span>';}else{if(p==0){ html += '<span class="showpageNum"><a href="/">1</a></span>';}else{html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1)+'</a></span>';}}if(eFlag ==0 && p == thisNum){downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';eFlag++;}}}if(thisNum>1){html = ''+upPageHtml+' '+html +' ';}html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html += downPageHtml;}if(postNum==1) postNum++;html += '</div>';var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");if(postNum <= 2){html ='';}for(var p =0;p< pageArea.length;p++){pageArea[p].innerHTML = html;}if(pageArea&&pageArea.length>0){html ='';}if(blogPager){blogPager.innerHTML = html;}}function showpageCount2(json) {var thisUrl = home_page_url;var htmlMap = new Array();var isLablePage = thisUrl.indexOf("/search/label/")!=-1;var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';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!=''){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum = postNum;}if(title!='') postNum++;htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;}}itemCount++;}for(var p =0;p< htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&& p<(thisNum+displayPageNum)){if(fFlag ==0 && p == thisNum-2){if(thisNum==2){upPageHtml = labelHtml + upPageWord +'</a></span>';}else{upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}fFlag++;}if(p==(thisNum-1)){html += '<span class="showpagePoint">'+thisNum+'</span>';}else{if(p==0){html = labelHtml+'1</a></span>';}else{html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1)+'</a></span>';}}if(eFlag ==0 && p == thisNum){downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';eFlag++;}}}if(thisNum>1){if(!isLablePage){html = ''+upPageHtml+' '+html +' ';}else{html = ''+upPageHtml+' '+html +' ';}}html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html += downPageHtml;}if(postNum==1) postNum++;html += '</div>';var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");if(postNum <= 2){html ='';}for(var p =0;p< pageArea.length;p++){pageArea[p].innerHTML = html;}if(pageArea&&pageArea.length>0){html ='';}if(blogPager){blogPager.innerHTML = html;}}</script><script type='text/javascript'>var thisUrl = home_page_url;if (thisUrl.indexOf("/search/label/")!=-1){if (thisUrl.indexOf("?updated-max")!=-1){var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));}else{var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));}}var home_page = "/";if (thisUrl.indexOf("?q=")==-1){if (thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}</script>

You can change to color codes to your test.

4. You can now save the Gadget view your blog.

Let me know the blog you tried this on. I’m waiting for your comments.

Get the most important happenings in your inbox weekly

Related Posts

5 Best Gadgets For Hobby-Bloggers In 2023

March 3, 2021

5 Best Writing Software And Gadgets For Writers In 2023

January 14, 2021

Suggestions on How To Write Enough

November 15, 2020
View 4 Comments

4 Comments

  1. Mehddy on June 19, 2014 3:59 pm

    Thanks for the article. Its nice being on your blog.

    Reply
    • Oscar Frank on July 3, 2014 9:57 pm

      You are very much welcome Mehddy. Hope to seeing more of your comments down here.

      Reply
  2. Reny on April 25, 2016 12:42 am

    Thanks it works. but how do i set the number of posts to show per page

    Reply
    • Oscar Frank on April 25, 2016 7:29 am

      Hi Reny,
      Go the Settings, then Post and Comments. That’s where you’ll be able to set the number of posts per page.

      Reply

Leave A Reply Cancel Reply

Latest Posts

Alphabet Lays Off 12,000 Employees

January 30, 2023

Microsoft to Invest Billions in ChatGPT

January 26, 2023

Google Translate Rolls Out 33 New Offline Languages

January 19, 2023

Apple Will Allegedly Launch “Next HomePod” Soon

January 19, 2023
Get the best African tech newsletters in your inbox
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.