كيفية تثبيت زر الذهاب صعودا وهبوطا على مدونة بلوجر

هذه المرة سأشارك معكم النصائح حول كيفية تثبيت زري الصعود والنزول في مدونة بلوجر.

ما هو زر صعود ونزول ؟

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

هذه إحدى الطرق لتشجيع المستخدمين على تصفح المزيد من المحتوى الآخر بسهولة.

يلعب زري الصعود و النزول دورًا مهمًا لموقع يحتوي على محتوى به صفحة طويلة.

بالنسبة إلى المواقع التي تحتوي على الكثير من المعلومات على صفحاتها، سيتم تمرير محتوى آخر دون إدراك أنه يتم التمرير إلى أسفل الصفحة.

حسنًا ، بالنسبة لأولئك الذين يرغبون في تثبيت أزرار الصعود والنزول على مدوناتهم، يرجى إتباع الخطوات أدناه :

كيفية تثبيت زر الذهاب صعودا وهبوطا على مدونة

الخطوة الأولى، إفتح إلى بلوجر ⇐ أنقر فوق المظهر ⇐ ثم فوق تحرير HTML

هذا الرمز الذي سأشاركه يستخدم رمز Fontawesome ، إذا لم تتم إضافته. أضف الكود أدناه قبل </head> في محرر النماذج.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

بعد إضافة رمز Fontawesome ، يرجى إضافة الرمز أدناه قبل </head> مباشرة

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

النسخة 1

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

النسخة 2

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>

</body> ثم أضف الكودين أدناه قبل

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

 </body> وأيضا أضف هذا الكود تحت نفس الوسم 

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

ثم قم بحفظ جميع التغييرات وسترى النتيجة.

كانت هذه التدوينة حول موضوع طريقة إضافة أزرار الصعود والنزول إلى مدونة بلوجر، أمل أن تكون مفيدة ورائعة.