Pagination Coes and Ads

 <div class="page-content"><div class="page active">

<!--Page 1 content Here--> </div> <div class="page"> <!--Page 2 content Here--> </div> <div class="page"> <!--Page 3 content Here--> </div> </div>

CSS & JavaScript Codes

<style>

/* Post Pagination by ٓAtif Shah */

.pagination-container {

    display: flex;

    justify-content: center;

}

.pagination-container .page-numbers-container {

    display: flex;

    font-size: 16px;

    overflow: hidden;

    font-weight: bold;

    font-family: "raleway", sans-serif;

    border-radius: 20px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}

.page-numbers-container .page-number {

    padding: 8px 20px;

    transition: all 400ms;

}

.page-numbers-container .page-number:hover {

    background: #c5c5e9;

    cursor: pointer;

}

.page-numbers-container .page-number.active {

    background: #17A589;

    color: #fff;

}

/* Page Content */

.page-content .page {

    display: none;

}

.page-content .page.active {

    display: block;

}

</style>

<script> 

const pages = document.querySelectorAll(".page-content .page");

const pageNumbersContainer = document.querySelector(".page-numbers-container");

if (pageNumbersContainer) {

let pn = localStorage.getItem("pageNumber") ? localStorage.getItem("pageNumber") : 0;

const createPagination = () => {

    pages.forEach((p, i) => {

        const pageNumber = document.createElement("div");

        pageNumber.classList.add("page-number");

        pageNumber.textContent = i + 1;

        pageNumber.addEventListener("click", () => {

localStorage.setItem("pageNumber", i);

location.reload();

        })

        pageNumbersContainer.appendChild(pageNumber);

    })

    document.querySelector(".page-number").classList.add("active");

    pages[0].classList.add("active");

}

createPagination();

const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");

const activatePage = (pageNumber) => {

    pages.forEach(p => {

        p.classList.remove("active");

    })

    pages[pageNumber].classList.add("active");

    pageNumbers.forEach(p => {

        p.classList.remove("active");

    })

    pageNumbers[pageNumber].classList.add("active");

localStorage.removeItem("pageNumber");

history.scrollRestoration = "manual";

}

activatePage(pn);

}

</script>

Ads Below Title

<ins class="adsbygoogle"

     style="width:728px;height:90px"

     data-ad-client="ca-pub-8437798374805172"

     data-ad-slot="5698208100"></ins>

Adse Below post

<ins class="adsbygoogle"

     style="width:468px;height:60px"

     data-ad-client="ca-pub-8437798374805172"

     data-ad-slot="9038223019"></ins>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8437798374805172"

     crossorigin="anonymous"></script>

<!-- AtifPedia Below Title H/R [previously link ad unit] -->

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-8437798374805172"

     data-ad-slot="4009673878"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8437798374805172"

     crossorigin="anonymous"></script>

<!-- AtifPedia - Below Title [previously link ad unit] -->

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-8437798374805172"

     data-ad-slot="3024196583"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>