ميزة التمرير السلس الإصدار SmoothScroll for websites v1.4.6

تعليقان (2)

في دروس قد مرت معنا حول ميزة التمرير السلس لصفحات المواقع بشكل عام كنا قدمنا عدة مكتبات وبطرق مختلفة واليوم كذلك سنقدم  SmoothScroll for websites v1.4.6 هذا السكريبت لايحتاج إلى تعديل سهل التركيب وطبعا خالي من مشكلة lage ..مع العلم أن هذه الميزة (التأثير السلس أو البطيء للصفحة) متوفرة إفتراضيا في الإصدارات الجديدة لمتصفح فاير فوكس و لن يظهر هذا التغيير بشكل فوري لمُستخدمي كروم، حيث تحتاج الشركة لفترة كي تختبر التقنية وتقوم بطرحها في أحد الإصدارات القادمة من المتصفح .





لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى: لوحة التحكم

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: تركيب الأكواد

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js التالي.. 
       <script type='text/javascript'>
       /*<![CDATA[*/
!function(){var u,l,c,o={frameRate:150,animationTime:400,stepSize:65,pulseAlgorithm:!0,pulseScale:4,pulseNormalize:1,accelerationDelta:50,accelerationMax:3,keyboardSupport:!0,arrowScroll:50,fixedBackground:!0,excluded:""},p=o,d=!1,s=!1,r={x:0,y:0},f=!1,m=document.documentElement,a=[],i=/^Mac/.test(navigator.platform),w={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},h={37:1,38:1,39:1,40:1};function v(){if(!f&&document.body){f=!0;var e=document.body,t=document.documentElement,o=window.innerHeight,n=e.scrollHeight;if(m=0<=document.compatMode.indexOf("CSS")?t:e,u=e,p.keyboardSupport&&X("keydown",x),top!=self)s=!0;else if(J&&o<n&&(e.offsetHeight<=o||t.offsetHeight<=o)){var r,a=document.createElement("div");a.style.cssText="position:absolute; z-index:-10000; top:0; left:0; right:0; height:"+m.scrollHeight+"px",document.body.appendChild(a),c=function(){r||(r=setTimeout(function(){d||(a.style.height="0",a.style.height=m.scrollHeight+"px",r=null)},500))},setTimeout(c,10),X("resize",c);if((l=new R(c)).observe(e,{attributes:!0,childList:!0,characterData:!1}),m.offsetHeight<=o){var i=document.createElement("div");i.style.clear="both",e.appendChild(i)}}p.fixedBackground||d||(e.style.backgroundAttachment="scroll",t.style.backgroundAttachment="scroll")}}var y=[],b=!1,g=Date.now();function S(s,f,m){var e,t;if(e=0<(e=f)?1:-1,t=0<(t=m)?1:-1,(r.x!==e||r.y!==t)&&(r.x=e,r.y=t,y=[],g=0),1!=p.accelerationMax){var o=Date.now()-g;if(o<p.accelerationDelta){var n=(1+50/o)/2;1<n&&(n=Math.min(n,p.accelerationMax),f*=n,m*=n)}g=Date.now()}if(y.push({x:f,y:m,lastX:f<0?.99:-.99,lastY:m<0?.99:-.99,start:Date.now()}),!b){var w=s===document.body,h=function(e){for(var t=Date.now(),o=0,n=0,r=0;r<y.length;r++){var a=y[r],i=t-a.start,l=i>=p.animationTime,c=l?1:i/p.animationTime;p.pulseAlgorithm&&(c=V(c));var u=a.x*c-a.lastX>>0,d=a.y*c-a.lastY>>0;o+=u,n+=d,a.lastX+=u,a.lastY+=d,l&&(y.splice(r,1),r--)}w?window.scrollBy(o,n):(o&&(s.scrollLeft+=o),n&&(s.scrollTop+=n)),f||m||(y=[]),y.length?P(h,s,1e3/p.frameRate+1):b=!1};P(h,s,0),b=!0}}function e(e){f||v();var t=e.target;if(e.defaultPrevented||e.ctrlKey)return!0;if(A(u,"embed")||A(t,"embed")&&/\.pdf/i.test(t.src)||A(u,"object")||t.shadowRoot)return!0;var o=-e.wheelDeltaX||e.deltaX||0,n=-e.wheelDeltaY||e.deltaY||0;i&&(e.wheelDeltaX&&B(e.wheelDeltaX,120)&&(o=e.wheelDeltaX/Math.abs(e.wheelDeltaX)*-120),e.wheelDeltaY&&B(e.wheelDeltaY,120)&&(n=e.wheelDeltaY/Math.abs(e.wheelDeltaY)*-120)),o||n||(n=-e.wheelDelta||0),1===e.deltaMode&&(o*=40,n*=40);var r=H(t);return r?!!function(e){if(!e)return;a.length||(a=[e,e,e]);return e=Math.abs(e),a.push(e),a.shift(),clearTimeout(D),D=setTimeout(function(){try{localStorage.SS_deltaBuffer=a.join(",")}catch(e){}},1e3),!N(120)&&!N(100)}(n)||(1.2<Math.abs(o)&&(o*=p.stepSize/120),1.2<Math.abs(n)&&(n*=p.stepSize/120),S(r,o,n),e.preventDefault(),void E()):!s||!W||(Object.defineProperty(e,"target",{value:window.frameElement}),parent.wheel(e))}function x(e){var t=e.target,o=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==w.spacebar;document.body.contains(u)||(u=document.activeElement);var n=/^(button|submit|radio|checkbox|file|color|image)$/i;if(e.defaultPrevented||/^(textarea|select|embed|object)$/i.test(t.nodeName)||A(t,"input")&&!n.test(t.type)||A(u,"video")||function(e){var t=e.target,o=!1;if(-1!=document.URL.indexOf("www.youtube.com/watch"))do{if(o=t.classList&&t.classList.contains("html5-video-controls"))break}while(t=t.parentNode);return o}(e)||t.isContentEditable||o)return!0;if((A(t,"button")||A(t,"input")&&n.test(t.type))&&e.keyCode===w.spacebar)return!0;if(A(t,"input")&&"radio"==t.type&&h[e.keyCode])return!0;var r=0,a=0,i=H(u);if(!i)return!s||!W||parent.keydown(e);var l=i.clientHeight;switch(i==document.body&&(l=window.innerHeight),e.keyCode){case w.up:a=-p.arrowScroll;break;case w.down:a=p.arrowScroll;break;case w.spacebar:a=-(e.shiftKey?1:-1)*l*.9;break;case w.pageup:a=.9*-l;break;case w.pagedown:a=.9*l;break;case w.home:a=-i.scrollTop;break;case w.end:var c=i.scrollHeight-i.scrollTop-l;a=0<c?c+10:0;break;case w.left:r=-p.arrowScroll;break;case w.right:r=p.arrowScroll;break;default:return!0}S(i,r,a),e.preventDefault(),E()}function t(e){u=e.target}var n,k,D,M=(n=0,function(e){return e.uniqueID||(e.uniqueID=n++)}),T={};function E(){clearTimeout(k),k=setInterval(function(){T={}},1e3)}function C(e,t){for(var o=e.length;o--;)T[M(e[o])]=t;return t}function H(e){var t=[],o=document.body,n=m.scrollHeight;do{var r=T[M(e)];if(r)return C(t,r);if(t.push(e),n===e.scrollHeight){var a=L(m)&&L(o)||O(m);if(s&&z(m)||!s&&a)return C(t,j())}else if(z(e)&&O(e))return C(t,e)}while(e=e.parentElement)}function z(e){return e.clientHeight+10<e.scrollHeight}function L(e){return"hidden"!==getComputedStyle(e,"").getPropertyValue("overflow-y")}function O(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"scroll"===t||"auto"===t}function X(e,t){window.addEventListener(e,t,!1)}function Y(e,t){window.removeEventListener(e,t,!1)}function A(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}if(window.localStorage&&localStorage.SS_deltaBuffer)try{a=localStorage.SS_deltaBuffer.split(",")}catch(e){}function B(e,t){return Math.floor(e/t)==e/t}function N(e){return B(a[0],e)&&B(a[1],e)&&B(a[2],e)}var K,P=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)},R=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,j=function(){if(!K){var e=document.createElement("div");e.style.cssText="height:10000px;width:1px;",document.body.appendChild(e);var t=document.body.scrollTop;document.documentElement.scrollTop,window.scrollBy(0,3),K=document.body.scrollTop!=t?document.body:document.documentElement,window.scrollBy(0,-3),document.body.removeChild(e)}return K};function q(e){var t,o;return(e*=p.pulseScale)<1?t=e-(1-Math.exp(-e)):(e-=1,t=(o=Math.exp(-1))+(1-Math.exp(-e))*(1-o)),t*p.pulseNormalize}function V(e){return 1<=e?1:e<=0?0:(1==p.pulseNormalize&&(p.pulseNormalize/=q(1)),q(e))}var F,I=window.navigator.userAgent,_=/Edge/.test(I),W=/chrome/i.test(I)&&!_,$=/safari/i.test(I)&&!_,U=/mobile/i.test(I),G=/Windows NT 6.1/i.test(I)&&/rv:11/i.test(I),J=$&&(/Version\/8/i.test(I)||/Version\/9/i.test(I)),Q=(W||$||G)&&!U;function Z(e){for(var t in e)o.hasOwnProperty(t)&&(p[t]=e[t])}"onwheel"in document.createElement("div")?F="wheel":"onmousewheel"in document.createElement("div")&&(F="mousewheel"),F&&Q&&(X(F,e),X("mousedown",t),X("load",v)),Z.destroy=function(){l&&l.disconnect(),Y(F,e),Y("mousedown",t),Y("keydown",x),Y("resize",c),Y("load",v)},window.SmoothScrollOptions&&Z(window.SmoothScrollOptions),"function"==typeof define&&define.amd?define(function(){return Z}):"object"==typeof exports?module.exports=Z:window.SmoothScroll=Z}();
      /*]]>*/
    </script>


تعليقات

  1. غير معرف10/05/2018 03:48:00 م

    السلام عليكم، يبدوا أن السكربت لا يعمل تحققت من الرابط فوجدته فارغا.

    ردحذف
    الردود
    1. BA8810/06/2018 12:14:00 ص

      شكرا أخي على التنبيه :kiss: ..لقد أصلحنا الخلل

      حذف

إرسال تعليق

إرسال تعليق

قد يهمك ايضا

  • إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

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

  • تركيب المكون الإضافي simpleCart (js) - أداة عربة التسوق إلى المدونة

    المطور
    صورة
    إذا كان لديك متجر للمنتجات أو مدونة تعرض بها بعض من مشاريعك أو منتجاتك وتريد حلًا بسيطًا وأنيقًا وقابلًا لإدارة التجارة الإلكترونية لموقعك على الويب ، فاستخدم simpleCart (js) الذي تم دمجه مع أداة قياسية للبلوجر ليسهل التعديل عليه دون عناء التعامل المباشر مع الأكواد. الأداة مدفوعة لكن أحببنا تقديمها لكم مجانا كاملة بدون أي نقص في الخصائص و مع العلم أن هذا البرنامج التعليمي يحتاج  لوحده مدونة كاملة وليس تدوينة واحدة لكن حاولنا تبسيطه قدر الإمكان في هذه الوثيقة التي سنبين لك طريقة تركيب الاداة وتشغيل جميع خصائصها ثم تبقى بعض المزايا خاصة فقط بالمكون الإضافي سنشرحها في تدوينات أخرى لمن يريد طرق عرض مختلفة.
    أظهر المزيد

  • إضافة خاصية تقييم المحتوى على شكل نجوم بإستخدام تطبيق Firebase

    المطور
    صورة
    إضافة ستسمح لمتابعيك وزوار مدونتك يراجعون أعمالك الإبداعية ومنتجاتك وخدماتك من خلال خاصية التقييم بالنجوم بشكل رسمي فهي ليست مجرد واجهة أو زينة بل هي أداة رسمية بكل المقايس كونها تعرض لك نفس البيانات في نتائج بحث  Google  كما أنها ذكية التخصيص ويمكن التحكم في أغلب عناصرها بسهولة..والجميل في الموضوع أن الإضافة تابعة لـخدمات Google على رأسهم منصة - Blogger - وهذا يعني أنك لن تضطر للتسجيل في أي موقع للحصول على الأداة بل ستعمل وفقا لقاعدة بياناتك الخاصة على - Firebase -  والتي تتحكم بها كما تريد. الرجاء قبل إكمال الموضوع أحرص على أنك تملك معرف خاص بك لتطبيق - Firebase - إذا لاتملك واحد راجع هذا الموضوع بسرعة..ثم نكمل. إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020
    أظهر المزيد

  • إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020

    المطور
    صورة
    ككل منتجات Google التي تم تجديد فيها واجهة المستخدم لاحظنا التغييرات والتحسينات التي طرأت على خدمة إنشاء قاعدة بيانات على موقع Firebase مما ادى لصعوبة في التعامل مع بيئة العمل ووجود بعض التعقيدات أثناء إنشاء معرف خاص بنا لذلك سنحاول أن نريكم الطريقة السهلة والسريعة لذلك.
    أظهر المزيد

  • أضف صفحة فهرس المحتويات للمدونة مع الترقيم Blogger Archive with Pagination

    المطور
    صورة
    أداة خريطة الموقع أو فهرس المحتويات للمدونة مع ترقيم الصفحات Blogger Archive with Pagination سكريبت أصلي وعتيق أضعه لكم مجانا وبإصداره الجديد مع طريقة عرض دينامكية بحيث يمكن تخصيص الألوان وإتجاه اللغة عربي أو أجنبي كما يمكن جعل الأداة تعرض قسم معين بدلا من عرض كامل للمنشورات . والميزة الأهم في الإضافة هي طريقة العرض السهلة وذلك عن طريق التنقل الرقمي دون إعادة تحميل الصفحة كاملة. كما أحيطك علما أنه يمكنك تحميل الأكواد الخاصة بهذه الأداة كنسخة إحتياطية على جهازك ستجد الأكواد بدون ضغط أو تشفير ليسهل قرائتها أو التعديل فيها.
    أظهر المزيد

  • تركيب محرر النصوص البرمجية CodeMirror v6.65.7

    المطور
    صورة
    كمطور هل إلتفت يوما إلى محرر النصوص الخاص بمنصة بلوجر وتسائلت عن مصدره؟!..هذا لأنك تحتاج مثل هذا المكون الإضافي في مشاريعك كمثال يمكنك صنع لوحة تحكم خاصة بك تجمع فيها جميع الأكواد التي تحتاجها في التكويد وبما أن مكتبة CodeMirror بحر واسع من المزايا سنكتفي في هذا الموضوع بطريقة التركيب كخطوة أساسية ثم يمكنك التوسع من خلال المصادر المرفقة لك.
    أظهر المزيد