إضافة زر تحميل المزيد من المواضيع على مدونة بلوجر

هل تبحث عن زر تحميل المزيد من المشاركات على مدونة بلوجر؟ هل تريد اضافة خاصية تحميل المزيد من المواضيع على بلوجر ؟

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

لهذا فاليوم ان شاء الله سوف اقدم لكم طريقة اضافة ميزة تحميل المزيد من مواضيع مدونة بلوجر بدلا من ازرار التنقل الإعتيادية، وهذه الميزة تتميز بكونها تقوم بإظهار المزيد من المشاركات بدون اعادة تحميل الصفحة.

ماهي ميزة زر تحميل المزيد من مواضيع المدونة

كما ذكرت مسبقا فهي ميزة بديلة عن ميزة ازرار التنقل الاعتيادية في مدونة بلوجر والتي تتمثل في ازرار مرقمة.

تتميز إضافة تحميل المزيد من المواضيع بكونها عبارة عن زر يُظْهِرُ المزيد من مشاركات المدونة بدون الحاجة الى اعادة تحميل كامل الصفحة وهذا ما سيسهل على زوار موقعك الوصول الى المزيد من المقالات بسرعة.

اكواد JavaScript لزر تحميل المزيد من المواضيع تعتمد في برمجتها على مكتبة Jquery و بالخصوص على خاصية Ajax لهذا قبل المرور الى شرح طريقة تركيب هذه الميزة لا بد من ان نتعرف على خاصية Ajax ومكتبة Jquery.

ماهي مكتبة Jquery ؟

مكتبة Jquery هي عبارة عن اكواد جافا سكريبت تختصر مجموعة من النصوص البرمجية المكررة والمهام الاكثر استعمالا وكل هذا لتسهيل عملية البرمجة. 

بخلاصة تسمح لك مكتبة Jquery بكتابة لغة برمجية مختصرة مبنية على JavaScript، هذا يجعلك تستطيع كتابة اكواد برمجة قصيرة وبسيطة تسهل عليك عملك، وتعفيك من كتابة الاكواد البرمجية الطويلة الموجودة في جافا سكريبت.

ماهي خاصية Ajax ؟

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

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

فوائد زر تحميل المزيد من المشاركات على مدونة بلوجر

  • تسهيل وصول الزوار الى المزيد من مواضيع مدونتك.
  • إضفاء احترافية وليونة في تعامل الزوار مع موقعك.
  • زيادة وقت مشاهدة الزوار لإعلانات ادسنس على مدونتك.
  • إضفاء جمالية على قالب مدونتك.

طريقة تركيب زر تحميل المزيد من المواضيع على قالب بلوجر



اضافة زر تحميل المزيد من المشاركات تتكون من مجموعة من اكواد البرمجة التي يجب علينا تركيبها على قوالب بلوجر وهي Html, Css, Javascript ولا بد من تركيب هذه الاكواد في مكانها الصحيح لتفادي حدوث اي اخطاء برمجية.

تركيب اكواد Javascript

سنبدأ اولا بتركيب اكواد الجافا سكريبت واريد ان اشير ان هذه الاكواد تحتاج الى وجود مكتبة Jquery في مدونتك، وقد سبق وان قمت بتعريف هذه المكتبة.

في غالب الأحيان مبرمجين قوالب بلوجر يقمون بإضافة سكريبت مكتبة Jquery على مدونة بلوجر لذلك يجب عليك التأكد فقط من وجود هذه المكتبة على مدونتك قم بالبحث عن عبارة Jquery فإذا ما وجدت سكريبت شبيه بما هو اسفله فهنا لن تحتاج الى اضافته اما في حالة لم تجد السكريبت على مدونتك فمباشرة انصحك بإضافة هذا السكريبت فوق عبارة </head> مباشرة.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

بعد اضافة اكواد مكتبة Jquery في حالة لم تكن موجودة على مدونتك الآن جاء الوقت لإضافة اكواد سكريبت زر تحميل المزيد  من المواضيع .

قبل اضافة اكواد الجافا سكريبت لا بد من التعديل على ClassName المعلم بالاحمر، والذي يجب ان تضع بدله ClassName العنصر الذي يحتوي على آخر المشاركات المعروضة في الصفحة الرئيسية.

بعد التعديل على القيمة المعلمة باللون الاحمر قم بوضع اكواد الجافا سكريبت فوق </body> مباشرة.


<script type='text/javascript'>
//<![CDATA[
var divOfPosts = ".blog-posts",
    do7a = !0;
$("#btn-7a").click(function(a) {
    if (a.preventDefault(), 1 == do7a) {
        let a = $(this).attr("data-url");
        $(this).hide(), $("#loader-7a").show(), $.ajax({
            url: a,
            success: function(a) {
                let t = $(a).find("#Blog1 " + divOfPosts).html(),
                    o = $(a).find("#btn-7a").attr("data-url");
                $("#Blog1 " + divOfPosts).append(t), o.length > 1 ? $("#btn-7a").attr("data-url", o) : ($("#btn-7a").html("لا يوجد المزيد"), do7a = !1, $("#btn-7a").css("background-color", "#aaa"))
            },
            complete: function() {
                $("#loader-7a").hide(), $("#btn-7a").fadeIn()
            }
        })
    }
});
//]]>
</script>

تركيب اكواد Css

قم بتركيب اكود Css زر تحميل المزيد فوق </b:skin> .


#con-7a{text-align:center;width:100%;height:auto;float:none;}
#btn-7a{display:inline-block;float:none;font-size:16px;font-weight:bolder;text-decoration:none;color:#fff;background-color:#00a;box-shadow:0 0 2px #00a;padding:2px 15px;margin:10px auto;border-radius:5px;transition:250ms;}
#btn-7a:hover{opacity:0.7;}
@keyframes loaderanime{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
#loader-7a{display:none;margin:10px auto;width:30px;height:30px;border:solid 4px #00a;border-radius:100%;border-right-color:transparent;border-top-color:transparent;animation:loaderanime 500ms linear infinite;}


تركيب اكواد Html

بالنسبة لأكود اتش تي ام ال يجب عليك وضعها بدلا من اكواد ازرار التنقل المرقمة الإعتيادية في قالب بلوجر.

الاكواد القديمة لأزرار التنقل توجد في الغالب داخل عنصر معرف ب id='blog-pager' لذلك قم بحذف كل مايوجد داخل العنصر فقط ثم ضع اكواد Html التالية مكانها.


<div id='con-7a'>
   <a expr:data-url='data:olderPageUrl' href='javascript:;' id='btn-7a'>تحميل المزيد</a>
   <div id='loader-7a'>
   </div>
</div>

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

انتهى شرح خاصية تحميل المزيد من المواضيع على مدونة بلوجر لا تسنى التعرف على المزيد من مواضيع اضافات بلوجر على مدونة حميان للمعلوميات كنتم مع محسن حميان سلام.

التعليقات

أحدث أقدم