Forms

الاسم

بريد إلكتروني *

رسالة *

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

Author Img
عبدو تكنولوجي

مرحبًا بكم في مدونة عبدو تكنولوجي! إذا كنت تدير مدونة على منصة بلوجر، فإن تحسين تجربة المستخدم يعد من أهم الأمور التي يجب مراعاتها. واحدة من الميزات التي يمكن أن تضيف قيمة كبيرة لموقعك هي زر "تحميل المزيد". يتيح هذا الزر للزوار استعراض المزيد من المقالات والمحتويات دون الحاجة إلى الانتقال بين الصفحات. في هذا الموضوع، سنتعرف على كيفية إضافة زر "تحميل المزيد" بسهولة إلى مدونتك على بلوجر، مما يساعد في زيادة تفاعل الزوار وتحسين تصفح الموقع.

فيديو الشرح


ضع الكود التالي فوق ال </head
<b:if cond='data:view.isMultipleItems'>
<style type='text/css'>
/*<![CDATA[*/
@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.pagerBtn{margin:1rem 0}
.pagerBtn a{display:none}
.pagerBtn button{display:flex;width:auto;text-align:right;padding:10px 20px;border-radius:5px!important;justify-content:space-between;align-items:center;flex-direction:column;position:relative;z-index:0;overflow:hidden;background:#2163e8;color:#fff;border:0;font-family:inherit;cursor:pointer;padding-bottom:13px;font-size:1em;margin:0 auto}
.pagerBtn button:after,.pagerBtn button:before{position:absolute;right:0;bottom:0;width:100px;height:100px;border-radius:50%;background:#fff;content:'';opacity:0;transition:transform .3s cubic-bezier(.02,.01,.47,1),opacity .3s cubic-bezier(.02,.01,.47,1);z-index:-1;transform:translate(100%,-25%) translateZ(0)}
.pagerBtn button:hover:after,.pagerBtn button:hover:before{opacity:.15;transition:transform .2s cubic-bezier(.02,.01,.47,1),opacity .2s cubic-bezier(.02,.01,.47,1);transform:translate3d(50%,0,0) scale(.9)}
.pagerBtn button:hover{transition:all .5s cubic-bezier(.02,.01,.47,1);transform:scale(1.1)}
.pagerBtn .loaderIcon{width:2rem;height:2rem;border-radius:50%;display:none;border-top:3px solid currentColor;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}
.pagerBtn .loading .loaderIcon{display:block}
.pagerBtn .loading .txt{display:none}
/*]]>*/       
</style>
</b:if>

ضع الكود التالي فوق ال </body


تابع الفيديو لتعرف كيفية وضع الكود التالي
<b:includable id='LoadMore' var='post'>
<div class='pagerBtn'>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<button aria-label='Load More' class='loadMore' type='button'>
<span class='txt'>
<data:messages.showMore/>
</span>
<span class='loaderIcon'/>
</button>
</div>
</b:includable>

إبحث عن الكود التالي
<b:include cond='data:view.isMultipleItems' name='postPagination'/>

وإستبدله بهذا
<b:include cond='data:view.isMultipleItems' name='LoadMore'/>

لا تنسى الاشتراك في المدونة من القائمة العلوية

قد تُعجبك هذه المشاركات

تعليقات

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