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

If you want the pages to be visible at the end of your website then this post will be very beneficial for you because in this you will learn how you can put a pagination system on your website's page; this method works very well in Blogger.

You don't have to do anything, you just have to follow the code as given.

First of all you have to go to your blogger theme's settings, after going to the blogger theme's settings you have to edit the HTML and do starl + f in it so that it can be searched and after that search this thing- ]]></b:skin> after searching press enter. After pressing enter, paste this code: <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;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, what you have to do is that you have to do Control + F again, and then paste the given code, after that click on SAVE, by doing this your work will be done and if you refresh your website, you will definitely see the page buttons in it.

After pagination is done, your website will look very amazing, viewers can easily go to that page by clicking on any number and can see their desired thing and that too easily. So this is how you learned how to apply pagination system on your blog post, especially on blogger? Believe me this method is not fake, it is absolutely hundred percent working method, you just try it once

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=15;var numshowpage=15;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";

/*]]>*/

</script>

<script>

</script>

</b:if>

< br />

Pagination Code for Blogger: A Complete Guide

Pagination is an essential feature for blogs, especially when you have multiple posts and want to improve user experience by organizing content effectively. Blogger does not offer built-in pagination, but you can add a custom pagination system using HTML, CSS, and JavaScript. This guide will help you implement pagination in Blogger without any copyright issues.

What is Pagination?

Pagination allows users to navigate through different pages of your blog instead of loading all posts at once. This improves page speed and readability. Typically, pagination includes "Next" and "Previous" buttons, or numbered links to specific pages.

Benefits of Pagination in Blogger

Improves Navigation: Makes it easier for visitors to browse through older posts.
Boosts SEO: Helps search engines index posts better.
Enhances User Experience: Users can quickly find relevant content without scrolling endlessly.
Optimizes Load Time: Reduces the number of posts loaded on a single page.

Adding Pagination to Blogger

Step 1: Backup Your Blogger Template

Before making any changes, it's best to back up your Blogger template.

Go to Blogger Dashboard → Theme.
Click on Backup/Restore.
Download your current template to avoid losing data.

Step 2: Add Pagination Script

Now, let's add a simple pagination script to your Blogger template.

1. Open Blogger Theme Editor

Navigate to Blogger Dashboard → Theme.
Click on Edit HTML.

2. Insert CSS Code

Find the <head> section and add the following CSS code before </head>:

<style>
.pagination {
  text-align: center;
  margin: 20px 0;
}
.pagination a {
  color: #333;
  padding: 10px 15px;
  margin: 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.pagination a:hover {
  background-color: #f4f4f4;
}
.pagination .current-page {
  background-color: #007bff;
  color: white;
  border: none;
}
</style>

3. Add JavaScript Code

Find </body> at the bottom and add the following JavaScript just above it:

<script>
function loadPagination() {
    var postsPerPage = 5; // Adjust the number of posts per page
    var numPages = Math.ceil(document.querySelectorAll('.post').length / postsPerPage);
    var paginationContainer = document.createElement('div');
    paginationContainer.className = 'pagination';
    
    for (var i = 1; i <= numPages; i++) {
        var pageLink = document.createElement('a');
        pageLink.innerText = i;
        pageLink.href = '#';
        pageLink.onclick = function(event) {
            event.preventDefault();
            showPage(Number(event.target.innerText));
        };
        paginationContainer.appendChild(pageLink);
    }
    document.body.appendChild(paginationContainer);
    showPage(1);
}

function showPage(pageNumber) {
    var posts = document.querySelectorAll('.post');
    var postsPerPage = 5;
    
    posts.forEach((post, index) => {
        post.style.display = (index >= (pageNumber - 1) * postsPerPage && index < pageNumber * postsPerPage) ? 'block' : 'none';
    });
}

document.addEventListener('DOMContentLoaded', loadPagination);
</script>

Step 3: Save and Preview

Click Save in the theme editor.
Visit your blog to see pagination in action!

Customizing the Pagination

If you want to change the pagination appearance, modify the CSS styles. You can adjust the background color, border, padding, and font size as per your preference.

To change the number of posts displayed per page, edit the postsPerPage variable in the JavaScript code.

Conclusion

Adding pagination to your Blogger site can significantly enhance user experience and site navigation. With a few lines of CSS, HTML, and JavaScript, you can create a professional-looking pagination system. Try implementing it on your blog today!

If you need further customization, feel free to modify the code as needed. Happy blogging!

Pagination code for blogger

Pagination Code for Blogger: A Complete Guide

What is Pagination?

Benefits of Pagination in Blogger