أفضل بدائل جوجل بلاي ستور

 

هل تبحث عن طريقة لتقسيم مشاركات Blogger الطويلة إلى صفحات مختلفة؟

في هذا البرنامج التعليمي الخاص بـ Blogger ، سأوضح لك كيفية إضافة ترقيم الصفحات إلى موقع المدونة الخاص بك. لذلك ، يمكنك تقسيم منشور مدونة طويل واحد إلى صفحات متعددة في Blogger. 

لذلك ، دعونا نفهم ما هو ترقيم الصفحات وما هي مزايا وعيوب استخدامه في مشاركات مدونتك. 

ما هو ترقيم الصفحات؟

ترقيم الصفحات اللاحقة هو أسلوب لتقسيم منشورات المدونة الطويلة إلى صفحات متعددة ويمكن للمستخدمين الانتقال إلى صفحات أخرى من خلال النقر على الزرين التالي والسابق. 

يُحسِّن ترقيم الصفحات Post Pagination من قابلية قراءة المحتوى الخاص بك ويمكن للمستخدمين بسهولة استيعاب المحتوى الخاص بك وقراءة القسم الذي يهتمون به. 

كما أنه يساعد في زيادة مشاهدات الصفحة وعائدات الإعلانات حيث يؤدي تفاعل المستخدم إلى زيادة صفحة الويب. 

لذلك ، دعونا نرى كيفية تقسيم مشاركات Blogger إلى صفحات متعددة.

كيفية إضافة ترقيم الصفحات في Blogger؟

لإضافة ترقيم الصفحات للنشر في Blogger ، اتبع الخطوات الواردة أدناه. 

• الخطوة 1: اذهب إلى لوحة تحكم Blogger وافتح منشور مدونة في عرض HTML. 
• خطوة 2: الآن عليك تقسيم منشورات المدونة بالتنسيق أدناه. 

<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>

• الخطوة 3: هنا استبدل محتوى الصفحة بين فئات div. (مثل محتوى الصفحة الأولى يستبدل <! - محتوى الصفحة 1 هنا ->)
• خطوة 4: الآن قم بلصق رمز زر ترقيم الصفحات بعد كل محتويات منشور المدونة. 

<!--Pagination Button-->

<div class="pagination-container">

        <div class="page-numbers-container">

                   </div>

    </div>

• الخطوة 5: الآن عليك لصق كود CSS في منشور المدونة أو في رمز السمة. 

<style>

/* Post Pagination by Key2Blogging */

 .pagination-container {

    display: flex;

    justify-content: center;

}

 .pagination-container .page-numbers-container {

    display: flex;

    font-size: 18px;

    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 24px;

    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>

الخطوة 6: الآن الصق كود Javascript بعد كود CSS مباشرة. (مطلوب للنقر على زر)

<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>

قم الآن بنشر منشورات المدونة الخاصة بك وقد نجحت في إضافة ترقيم الصفحات إلى موقع Blogger على الويب. 

بهذه الطريقة ، يمكنك بسهولة تقسيم المنشورات الطويلة إلى صفحات متعددة في Blogger ومنح المستخدمين تجربة مستخدم أفضل على موقع الويب.

 

إذا كانت لديك أي شكوك ، فيمكنك أن تسأل في Telegram Group أو أن تسأل في مربع التعليق.