ميزة التمرير السلس الإصدار 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 متعددة الإستخدامات.
    أظهر المزيد

  • تركيب أزرار التمرير السلس أعلى أو أسفل الصفحة إلى بلوجر Go Up and Down

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

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

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

  • إضافة زر إظهار وإخفاء حاوية لصندوق تعليقات بلوجر بأسهل طريقة Comment Slide Panel

    المطور
    صورة
    على الرغم من وجود عدد كافٍ من البرامج التعليمية الخاصة بميزة - إضافة زر إظهار وإخفاء حاوية صندوق التعليقات إلا أنني أريد فقط أن أوضح أن هناك طريقة أسهل للقيام بذلك وهي الطريقة التي سنشرحها كونها لا تحتاج إلى تفكيك بنية القالب الشاملة لإضافة هذه الميزة البسيطة !! ، ما سنقوم به السماح لـ jQuery بالبحث وإدراج العناصر التي نحتاجها (في هذه الحالة ، زر / إظهار وإخفاء الحاوية ).
    أظهر المزيد

  • أداة ستجعل من الصعب فك تشفير شفرة المصدر | JavaScript Obfuscator Tool

    المطور
    صورة
    أداة مجانية متوفرة على النت تتيح لكم تحويل شفرة مصدر JavaScript الأصلية إلى تمثيل جديد يصعب فهمه ونسخه وإعادة استخدامه أوتعديله دون إذن. والرائع هو أنه مهما كان حجم وتداخل السكريبت المراد تشفيره سيكون للنتيجة المبهمة الوظيفة الدقيقة للرمز الأصلي..أقصد بدون الحصول على خطا بنسبة 99.99% أوليس هذا رائعا!!. ومن الرائع كذلك في هذه الأداة التي من خلال استخدام مختلف التحولات و"الفخاخ"، مثل ، الدفاع عن النفس و حماية التصحيح ستصعب قراءته باستخدام أدوات مضادة كأداة JS Beautifier إلا طبعا من محترف. لماذا أرغب في تعتيم رمز JavaScript الخاص بي؟ دعني أخبرك أن هناك العديد من الأسباب التي تجعل من الأفضل حماية التعليمات البرمجية الخاصة بك ، منها ماهو تقني ومنها ماهو تجاري على سبيل المثال إزالة التعليقات والمساحة البيضاء التي ليست مطلوبة. جعله أسرع في التحميل وصعوبة الفهم ؛ حماية المنتج المدفوع كالقوالب والإضافات التي سهرت على بنائها أشهر وأعوام فمن غير العدل أن تسرق منك وتنسب لغيرك..وفي المجمل لاتكن متساهل حتى لايفقد المجال رونقه والجمال الكامن في شطط البحث ومايصحبه من لذة النجاح فهل...
    أظهر المزيد

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

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