طريقة اضافة عرض المزيد - Load More - لمدونات بلوجر

مشاركة
المؤلفإلادارةالتاريخ
 طريقة اضافة عرض المزيد - Load More - لمدونات بلوجر، هذه اضافة ستجعل المشاركات تحمل بشكل تلقائي و بضغطة زر، بدون اعادة تحميل الصفحة مرة تانية.


اضافة عرض المزيد ( Load More ) لمدونات بلوجر

1. توجه الى المدونة الخاصة بك 
2. حدد المظهر من خلال القائمة الجانبة ( لا تنسى اخد نسخ احتياطية للقالب تفادي مشاكل تعديل )
3. ثم توجه الى تعديل HTML
4. ابحث عن الكود التالي :


<b:includable id='nextprev'>...</b:include>

5. استبدل الكود السابق بالكود التالي :
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pagerx'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>MORE</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>المزيد</a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><i aria-hidden='true' class='fa fa-home'/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/> 

5. الان اضف الكود التالي فوق </body>  :

 
<b:if cond='!data:view.isSingleItem'>
<script type='text/javascript'>
//<![CDATA[
var $pager = $("#blog-pagerx"),
    $posts = $(".blog-posts");
$pager["find"]("#blog-pager-newer-link")["remove"]();
$pager["on"]("click", "#blog-pager-older-link a", function() {
    $["get"](this["href"], {}, function(variable_0) {
        var variable_1 = $(variable_0)["find"](".post")["length"] ? $(variable_0) : $("<div></div>");
        $posts["append"](variable_1["find"](".blog-posts")["html"]());
        $pager["html"](variable_1["find"]("#blog-pager-older-link")["clone"]())
    }, "html");
    $(this)["replaceWith"]("<div class=\"loader icon-jt-simple\"></div>");
    return false
})
//]]>
</script>
  </b:if>

6. ابحث عن الرمز <head>  ثم ضع الكود التالي فوقه مباشرة ! ثم قم بحفظ


 
<b:if cond='data:view.isMultipleItems'>
<style type='text/css'>
/*Blog Pager*/
#blog-pagerx{position:relative}
#blog-pager-older-link{position:relative;height:90px;width:90px;margin:30px auto;display:block}
.blog-pager-older-link{width:100%;height:100%;text-align:center;font-weight:700;line-height:78px;background-color:#ee4c4c;border-radius:50%;color:#fff;-webkit-transition:.2s;-o-transition:.2s;transition:.2s;display:block}
.blog-pager-older-link:before{position:absolute;top:19px;left:29px;width:32px;height:32px;font-size:32px;color:#fff;font-family:fontawesome;content:&#39;\f0d7&#39;}.loader,.loader:after{height:100%;width:100%}
.loader{position:relative}
.loader:after{position:absolute;top:0;left:0;content:&#39;&#39;;border-top:5px solid #ededed;border-right:5px solid #ededed;border-bottom:5px solid #ededed;border-left:5px solid #ffb13d;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:load 1s linear infinite;animation:load 1s linear infinite}
@-webkit-keyframes load{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
</style>
</b:if>
يرجى ضبط CSS أعلاه إذا كان هناك شيء تريد تغييره.



$ تـبـرع لـنـا
مثلما يعود النهر إلى البحر هكذا يعود عطاؤك إليك
إذا كانت خدماتنا تنال رضاك وترى أن علينا الإستمرار يرجى التبرع لنا لتقديم المزيد لغيرنا
إرسال تعليق
التسميات

تعليقات

الأرشيف

نموذج الاتصال

إرسال