In Blogger, there is an option to set how many posts we want to show per page by going to Settings Menu > Posts & Comments > Show Max. posts. Once the total number of posts on our blog exceeds this number, We'll see "Old Posts" and "New Posts" navigation links on our home page and in the footer of archive pages because Blogger page numbering doesn't have any built-in functionality. But instead of links to old and new posts, page numbers help our blog visitors navigate quickly (jump from one page to another or click on a specific page) and know the total number of posts published. So this tutorial will show you how to add numbered page navigation to Blogger/Blockspot blog using JavaScript.
You can choose one of the 7 styles below.
In Blogger, there is an option to set how many posts we want to show per page by going to Settings Menu > Posts & Comments > Show Max. posts. Once the total number of posts on our blog exceeds this number, We'll see "Old Posts" and "New Posts" navigation links on our home page and in the footer of archive pages because Blogger page numbering doesn't have any built-in functionality. But instead of links to old and new posts, page numbers help our blog visitors navigate quickly (jump from one page to another or click on a specific page) and know the total number of posts published. So this tutorial will show you how to add numbered page navigation to Blogger/Blockspot blog using JavaScript.
You can choose one of the 7 styles below.
Step 1. Go to Blogger Dashboard > "Template" > click on the "Edit HTML" button
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.
Step 3. Now choose one of the following numbered page navigation styles and copy the CSS code and paste on above ]]></b:skin> line the code of the style that you want to use:
I. Adding The CSS
Numbered Page Navigation on Gray
Black Numbered Page Navigation With Orange Current Page
Dark Numbered Page Navigation With Blue Current Page
Gray Page Navigation With Blue Page Number
Blogger Pagination on Green with Orange and Pink on Hover
Orange Numbered Page Navigation Widget for Blogger
Grey Paged Navigation for Blogger with Red Current Page
II. Adding The Script
Step 4. Now find (CTRL + F) this tag </body>
Step 5. Add the following script just above it: