خاصية تحميل المزيد من المواضيع علي بلوجر

إذا لم تمتلك مكتبة Jquery على مدونتك سابقا ، فيرجى تحميلها أولاً عن طريق وضع الكود التالي قبل الوسم </body>.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

والٱن قبل ان نبدأ إذا كنت توفر "أداة ترقيم الصفحات في مدونتك" ، فيرجى حذفها أولاً. دائما ما تستخدم Javascript ، انظر فقط إلى أسفل مدونتك. إذا إختلط عليك الأمر تستطيع فقط وضع تعليق أسفل وسنساعدك .

1. عمل زر تحميل المزيد

الكود التالي هو كود CSS الخاص بشكل الزر ، يرجى وضعه قبل الوسم //]> </ b: skin> أو إستخدم هذه الصفحة عبر وضع الكود التالي داخل النمزذج ثم إضغط تحويل ثم إنسخ الكود المنشىء وضعه فوق </head>. 

/* Load More Button by btechnomee.blogspot.com */
#blog-pager.loadmore{margin:20px 0;padding:10px 0;display:block;text-align:center}
#blog-pager .loadmore-btn{cursor:pointer;padding:8px 24px;background:#4285f4;color:#fff;border-radius:50px;font-family:'Quicksand',sans-serif;font-weight:600;outline:0;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
#blog-pager .loadmore-btn.loading,#blog-pager .loadmore-btn.loading:hover,#blog-pager .loadmore-btn.no-more,#blog-pager .loadmore-btn.no-more:hover{background:#fff;color:#888;cursor:wait}
#blog-pager .loadmore-btn.no-more{cursor:default}
#blog-pager .loadmore-btn:hover{color:#fff;background:#3c79de}

التالي سنقوم بربط الزر. ابحث عن الوسم id='blog-pager' ، ثم احذف الشفرة الموجودة في العلامة ، واستبدله بالرمز التالي.

<a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>

سيصبح مثل الكود التالي:

<div id='blog-pager' class='loadmore'>
 <a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>
</div>

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

 إنشاء تحميل المزيد من المواضيع باستخدام JQuery Ajax

 وضع الكود التالي قبل الوسم </body>.

<script>
//<![CDATA[
$(document).on('click','.loadmore-btn', function(e){
   e.preventDefault();
   let nextLink = $(this).attr('href');
   let loadmoreBtn = $('#blog-pager .loadmore-btn');
   if(nextLink){
      $.ajax({
         url: nextLink,
         beforeSend: function(){
           loadmoreBtn.addClass('loading').text('جاري تحميل البيانات...');
         },
         complete: function(){
           loadmoreBtn.removeClass('loading');
         },
         success: function(html){
           let rslt = $(html).find('#Blog1 .blog-posts').html();
           let nextPage = $(html).find('#Blog1 .loadmore-btn').attr('href');
           $('.blog-posts').append(rslt);
           loadmoreBtn.show();
           if(nextPage){
             loadmoreBtn.attr('href', nextPage).text('Load More');
           }else{
             loadmoreBtn.addClass('no-more').text('ااوهه يالا الهول لقد رأيت كل المقالات يالك من شخص يمتلك كل هذا الوقت').removeAttr('href');
           }
         }
      });
   }
});
//]>
</script>

شرح الأكواد