How to Add Unlimited Numbered Page Navigation for Blogger ~ Get On To Pc 2020

How to Add Unlimited Numbered Page Navigation for Blogger

Page Number Navigation Widget for Blogger

By default, only the last 7 posts are shown on the main page of the blog. To view older posts, we need to click on the “Previous” link at the bottom of the page. The other seven blog articles will be shown. Two more links will appear below, "Next" which show more recent posts, and “Home”. So, with the help of links, you can move around the main page back and forth and view seven posts at each step.

The default navigation is not very convenient. It does not allow to evaluate in which part of the main page there are viewed articles. It is impossible to remember where the viewing of the blog is completed, in order to return to the same place tomorrow.

It is generally recognized that navigation is more convenient when the page being viewed with messages has a number that is visible to the reader. In addition, the total number of pages is displayed.

The new numbered page navigation, unlike previous versions, has a lighter script. Another major advantage is that it is unlimited. Older versions display only 150 blog posts. The user can immediately go to the most recent (first) message with one click. You can put this numbered navigation on any Blogger theme, including Contempo Soho Emporio and Notable.

How do I add page numbers to my navigation page in Blogger

Now let's perform the task, replace the navigation with arrows to page numbers by setting new script.

Go to your dashboard - Theme - Edit HTML find there tag ]]></b:skin> and just above it paste this CSS code:

How do I Add Page Number to my Post page in Blogger?

Ctrl + F

-------------------------------------------------------

]]></b:skin>

<style>

.showpageOf{display:inline-block;font-size:90%;padding:7px 12px;vertical-align:top;line-height:20px;}

.showpagePoint{background:#333;color:#fff;display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:initial}

.showpage a,.showpageNum a{display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;transition:color .3s}

.showpage a:hover,.showpageNum a:hover{background-color:#fefefe;color:#454545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:color .3s}

</style>

After this find in your HTML editor closing tag </body> before it paste the following JS:

</body>

<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>

/*<![CDATA[*/

var postperpage=7;var numshowpage=7;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";

/*]]>*/

</script>

<script>

</script>

</b:if>

Sunday, 29 January 2023

How to Add Unlimited Numbered Page Navigation for Blogger

Page Number Navigation Widget for Blogger

How do I add page numbers to my navigation page in Blogger