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

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

اقرا ايضابرج السرطان الدليل الشامل للصفات والشخصية والعيوب والميزات

اقرا ايضابرج الجوزاء الدليل الشامل للصفات والشخصية والعيوب والميزات

اقرا ايضابرج الثور الدليل الشامل للصفات والشخصية والعيوب والميزات

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

crossorigin="anonymous">

السلام عليم زوار مدونة كلشي مجاني مجددا في تدوينة جديدة حول خاصية جديدة،

هذه الميزة تجعل الزائر يتصفح تدويناتك بكل سهولة وسرعة مقارنة بترقيم صفحات. في مايلي طريقة اضافة عرض المزيد ( Load More ) لمدونات بلوجر،

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

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

استبدل الكود السابق بالكود التالي :

<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>

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

ابحث عن الرمز <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>

يرجى ضبط CSS أعلاه إذا كان هناك شيء تريد تغييره.

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