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

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

شرح كيفية إضافة أيقونة زر الصعود بشكل صاروخي على مدونة بلوجر Animated Scroll To Top Widget

عند الضعط عليها تنقلك تلقائياً إلى أعلى مدونة Blogger .

دون الحاجة إلى الصعود عبر الفارة وعمود الصعود الافتراضي الخاص بالمدونة .

الشرح

من لوحة تحكم المدونة
التخطيط
إضافة أداء "HTML/JavaScript"
ثم انسخ الكود التالي إلى داخل الإضافة ، ثم حفظ.

<span class="flame"></span>
      <span class="flame"></span>
      <span class="flame"></span>
    </div>
<style>
    .scroll-top img{
    height:45px;
    margin: -12px 0 0 5px;
    border:0;
    }

.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
    </style>

//Click event to scroll to top
        jQuery('.scroll-top').click(function(){
            jQuery('html, body').animate({scrollTop : 0},800);
            jQuery(this).addClass('scrolling');

});

</script>

للمعاينة ومشاهدة النتيجة توجه للمدونة وانزل للأسفل لتظهر لك أيقونة الصعود للأعلى.
وعند الضغط على الأيقونة سوف تصعد للأعلى مباشرة وبكل سلاسة.

تغيير الأيقونة

كيفية إدراج أيقونات أخرى رائعة على حسب اختيارك

موقع الأيقونات : flaticon

أدخل الموقع وفي قائمة البحث اكتب "scroll" أو "Rocket" وابحث
بالنسبة لي أنا كتبت "Rocket" 😎

ضع مؤشر الفارة على الأيقونة التي تريدها واضغط على رمز العين
ثم اضغط على الخيار "BASE 64 </>"

ثم اضغط على خيار تحميل مجاني "Free download"

ستظهر لك الأكواد قم بنسخ كود "HTML image" كاملاً

ثم ارجع إلى التخطيط حيث إضافة "HTML/JavaScript"
التي أضفتها بداية الموضوع ، افتحها وقم بتحديد كود الأيقونة
من <img src= إلى " /> ، وقم بحذفه ، ثم أضف الأيقونة الجديدة. ثم حفظ .

- هذا هو الكود الذي تقوم بحذفه وتغييره كلما أردت تغيير الأيقونة

أبو طارق صانع الفارق