إضافة زر الصعود للأعلي لمدونات بلوجر إضافة زر الصعود للأعلي لمدونات بلوجر

مثال علي Codepen

مرحباً متابعين وزوار مينت ويب الأعزاء- موضوع اليوم عن إضافة "زر الصعود للأعلي لمدونات بلوجر "بناء علي طلب أحد المتابعين للمدونة، هذه الأداة خفيفه جداً في القالب وأيضاً ذو شكل جذاب جداً تم أستعمال جافاسكريبت خام أي أننا لم نستخدم أي مكاتب أخري مثل jQuery في "أنشاء زر الصعود للأعلي" هذه.

محتوي المقال

تثبيت زر الصعود للأعلي

من لوحة تحكم بلوجر ، سنقوم بالصغط علي المظهر تخصيص متقدم إضافة CSS وقم بلصق الكود التالي:

/*!
 * زر الصعود للأعلي الأصدار الأول v1.0
 * copyright 2020 Mint Web
 */
.scrollToTop {
	outline: 0;border: 0;font - size: 14 px;cursor: pointer
}.scrollToTop svg {
	display: block
}.scrollToTop {
	position: fixed;z - index: 9999;opacity: 0;pointer - events: none;transition: opacity .3 s,
	background .3 s,
	-webkit - transform .3 s;transition: transform .3 s,
	opacity .3 s,
	background .3 s;transition: transform .3 s,
	opacity .3 s,
	background .3 s,
	-webkit - transform .3 s; - webkit - transform: translateY(-2e m);transform: translateY(-2e m)
}.scrollToTop.visible {
	pointer - events: all;
	opacity: 1; - webkit - transform: translateY(0);
	transform: translateY(0)
}
 .scrollToTop svg {
	fill: #fff
}.scrollToTop {
	background - color: #252525;box-shadow:0 1px 4px rgba(0,0,0,.5);bottom:1em;right:1em;padding:.5em;border-radius:4px}.scrollToTop:hover{background-color:# 020202
}


لا تنس حفظ التغييرات بالضغط على زر "تطبيق علي المدونة". سنقوم الآن بتحرير HTML ، ونبحث عن </body>
وفوقه سنقوم بلصق الكود التالي:

<!-- ScrollToTop -->
<button id="scrollToTop" data-upspeed='1000' data-upshow='600' class="scrollToTop">
   <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
   </svg>
</button>
<script src='//cdn.jsdelivr.net/gh/imintweb/Js/scrollup.min.js'></script>

احفظ التغييرات والآن تم إضافة زر الصعود للأعلي "بدون jquery في بلوجر.

خيارات إضافية

في الوقت الحالي ، قمت بتضمين خيارين فقط ، يتم تعيينهما افتراضيًا على 600 و 1000 إذا لم يتم تحديدهما في كود HTML. يوضح الجدول التالي هذه القيم:

الخيار النوع الوصف
data-upshow number التمرير قبل ظهور الزر
data-upspeed number سرعة النزول (1000 = 1 ثانية)

آمل أن تكون أداة زر الصعود للأعلي مفيدة لك. إذا كانت كذلك ، لا تنس مشاركة هذه المقالة على الشبكات الاجتماعية الخاصة بك ، فهذا شيء أقدره كثيرًا دائمًا وشكرأ علي وقتك.