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

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

ضع الكود التالي فوق ال </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'/>