زر الصعود للأعلى بتأثيرين مختلفين
التأثير الأول الصعود بتأثير التباطىء عند الصعود للأعلى
ابحث عن الوسم التالي ]]></b:skin> و الصق الكود فوقه تماما
/* Back to top */#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}
قم بالبحث عن الوسم التالي /body و الصق الكود التالي فوقه
<div id='easy-top'/><script type='text/javascript'>//<![CDATA[$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});//]]></script><script src='https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/easing.js' type='text/javascript'/>
الشكل الثاني عبارة عن إضافة زر الصعود بتأثير الأرتداد عن الصعود للأعلى
اختار الكود الاول و ركبه فوق ]]></b:skin>
و لكن غير الكود الثاني بهذا
<div id='easy-top'/><script type='text/javascript'>//<![CDATA[$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});//]]></script><script src='https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/easing.js' type='text/javascript'/>
ثم قم بالحفظ و مبروك عليك الأضافة
شكرًا لوقتكم واهتمامكم بقراءة موضوع اضافة زر الصعود للأعلى بتأثيرين مختلفين لقوالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
