مرحبا بكم مجددا في تدوينة جديدة حول خاصية جديدة، بصراحة هذه الاضافة حصرية وتنال اعجاب كل من شاهذها، فهي تجعل الزائر يتصفح تدويناتك بكل سهولة وسريعة مقارنة بترقيم صفحات. في مايلي طريقة اضافة عرض المزيد ( Load More ) لمدونات بلوجر، هذه اضافة ستجعل المشاركات تحمل بشكل تلقائي و بضغطة زر، بدون اعادة تحميل الصفحة مرة تانية.
اضافة عرض المزيد ( Load More ) لمدونات بلوجر
1. توجه الى المدونة الخاصة بك
2. حدد المظهر من خلال القائمة الجانبة ( لا تنسى اخد نسخ احتياطية للقالب تفادي مشاكل تعديل )
3. ثم توجه الى تعديل HTML
4. ابحث عن الكود التالي :
5. استبدل الكود السابق بالكود التالي :
5. الان اضف الكود التالي فوق </body> :
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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'/>
</b:includable>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:'\f0d7'}.loader,.loader:after{height:100%;width:100%}
.loader{position:relative}
.loader:after{position:absolute;top:0;left:0;content:'';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>