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

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

في هذا الشرح ستتمكن من تنفيذ زر تحميل المزيد من المشاركات على مدونتك

هناك الكثير من الاضافات المشابهة لهذه الاضافه لكن هذه الاضافه هي الأكثر فعالية


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

تحتاج فقط إلى اتباع هذه الخطوات

انتقل الي المظهر واختر تعديل html

الان ابحث عن
</body>
والصق قبله مباشرتا الكود التالى

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/javascript'>
var spinner = $('.lds-css');
spinner.wrap("<div class='loadMore'><div id='loader' style='display: none'></div></div>");
spinner.parents('.loadMore').prepend("<div class='loadMorePosts'><a class='loadMoreButton' href='#'>Load More Posts</a></div><div class='noMorePosts' style='display: none'><span>No More Posts to Load</span></div>");
$('#blog-pager').hide();
var olderLink = $('a.blog-pager-older-link').attr("href");
if(olderLink)
$('.loadMorePosts').show();
$('.loadMorePosts a').on('click', function(e){
 $('.loadMorePosts').hide();
    $.ajax({
        url: olderLink,
        success: function(html){
   var res = $(html).find('.blog-posts');
   res.children(".status-msg-wrap").remove();
            $('.blog-posts').append(res.html());
   olderLink = $(html).find('.blog-pager-older-link').attr("href");

   if (olderLink)
    $('.loadMorePosts').show();
   else $('.noMorePosts').show();
        },
  beforeSend: function() {
   $('.loadMore > #loader').show();
  },
     complete: function(){
         $('.loadMore > #loader').hide();
  },
    });
e.preventDefault();
});
</script>
</b:if>

الان ابحث عن هذا السطر

<b:include name='nextprev'/>

قد تجد هذا السطر مكرر اكثر من مره تاكد من وجود السطر التالي

<b: if cond = 'data: blog.pageType! = "item"'>

الان الصق قبل الكود السابق الاكواد التاليه

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='loadMore'>
<div class='loadMorePosts'><a href='javascript:;'>  تحميل المزيد  <i class='icon-plus'/></a></div>
  <div class='noMorePosts' style='display: none'><span> نهاية المشاركات <i class='icon-close'/></span></div>
<div id='loader' style='display: none'>
<div class='spinner'>
  <div class='dot1'/>
  <div class='dot2'/>
</div>
</div>
</div>
 </b:if>

اخيرا ابحث عن
]]></b:skin>
واضف قبله الاكواد التاليه

.spinner {
  margin:  0;
  width: 30px;
  height: 30px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #e51515;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}



#loader {
padding: 10px 12px;
display: inline-block;
}
.loadMore {
clear: both;
margin-bottom: 20px;
}
html[dir='rtl'] .loadMore {
text-align: center;
}
.loadMore .loadMorePosts a {
width: 170px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    font-size: 22px;
    color: #fff;
    background: #e51515;
    margin: 0;
    display: inline-block;
    font-weight: 600;
}
.noMorePosts span {
width: 220px;
    height: 40px;
    text-align: center;
 line-height: 36px;
    font-size: 22px;
display: inline-block;
font-weight: bold;
pointer-events: none;
background-color: #dfdfdf;
box-shadow: none;
margin: 0;
color: #9f9f9f;
cursor: default;
}

انتهي الشرح

HashtagsTech

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه

Facebook

Twitter

Instagram

شارك هذا الموضوع