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

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

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

هذه الميزة تجعل الزائر يتصفح تدويناتك بكل سهولة وسرعة مقارنة بترقيم صفحات. في مايلي طريقة اضافة عرض المزيد ( 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 أعلاه إذا كان هناك شيء تريد تغييره.

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

كلشي مجاني klshy mjany

القائمة الرئيسية

الصفحات

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

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

أخر المواضيع من قسم : أكواد بلوجر

تعليقات

إرسال تعليق

طريقة تعديل أشكال التسميات بشكل رائع وبتأثيرات جميلة و جذابة