ملاحظة: هده الإضافة مخصصة لمطورين او لمن لديه خبر في التعامل مع ملفات بلوجر.
تركيب الإضافة
تتركب الإضافة من كودين احدهم كود السكربت والأخر كود تشغيل النص, نتوجه الى لوحة التحكم في المدونة تم المظهر تم تحرير HTML تم اتبع الخطوات التاليه.
1- تركيب سكربت التأثير
نبحث عن </head> تم نضع الكود التالي فوقه<script type="text/javascript">
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.NTyped=e():t.NTyped=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=r(1),o=n(i);e.default=o.default,t.exports=e.default},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),o=r(2),s=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,t),this._stringPostion=0,this._arrayPosition=0,this._element=null,this._options=null,this._strings=null,this._timeout=null,(0,o.doesElementExist)(e)&&(0,o.parseOptions)(r,t.defaultOptions)&&(this._element=e,this._options=Object.assign({},t.defaultOptions,r),this._strings=this._options.strings,this.initialize())}return i(t,[{key:"initialize",value:function(){var t=this;this._options&&this._options.showCursor&&this.addCursorElement(),this._timeout=setTimeout(function(){t.writeCharacter(t._strings[t._arrayPosition],t._stringPostion)},this._options.startDelay)}},{key:"addCursorElement",value:function(){var t="<span class="+this._options.classes.cursor+">"+this._options.cursorChar+"</span>";this._element&&this._element.insertAdjacentHTML("afterend",t)}},{key:"writeCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){if(n._options.stringType===t.Types.HTML){var i=e.charAt(r);if("<"===i||"&"===i){for(var o="<"===i?">":";";e.charAt(r+1)!==o&&r+1<e.length;)r++;r++}}if(r===e.length){if(!n._options.loop&&n._arrayPosition===n._strings.length-1)return;n._timeout=setTimeout(function(){n.deleteCharacter(e,r)},n._options.backDelay)}else{var s=e.substr(0,r+1);n.setElementContent(s),r++,n.writeCharacter(e,r)}},this.getCharacterWriteSpeed(this._options.typeSpeed))}},{key:"deleteCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){var i=e.substr(0,r);if(n._options.stringType===t.Types.HTML&&">"===e.charAt(r)){for(;"<"!==e.charAt(r-1)&&r>0;)r--;r--}n.setElementContent(i),r>0?(r--,n.deleteCharacter(e,r)):(n._arrayPosition++,n._arrayPosition===n._strings.length&&(n._arrayPosition=0),n.writeCharacter(n._strings[n._arrayPosition],r))},this.getCharacterWriteSpeed(this._options.deleteSpeed))}},{key:"setElementContent",value:function(e){var r=this._element;this._options.stringType===t.Types.HTML?r.innerHTML=e:r.textContent=e}},{key:"getCharacterWriteSpeed",value:function(t){return Math.round(70*Math.random())+t}}]),t}();s.Types={HTML:0,TEXT:1},s.defaultOptions={stringType:s.Types.HTML,strings:["This is a typing animation!","You can also add your own sentences","So go do it!"],showCursor:!0,cursorChar:"|",loop:!0,startDelay:500,backDelay:500,typeSpeed:0,deleteSpeed:0,classes:{cursor:"title__cursor"}},e.default=s,t.exports=e.default},function(t,e){"use strict";function r(t){var e={}.toString.call(t).match(/\s([a-zA-Z]+)/);return e[1].toLowerCase()}function n(t){return!(!t||!(t.nodeName||t.prop&&t.attr&&t.find))}function i(t,e){return Object.entries(t).forEach(function(t){var n=o(t,2),i=n[0],s=n[1],a=e[i],u=r(s),l=r(a);if(l!==u)throw new Error('NativeTyped: Option "'+i+'" has wrong type. Should be '+l+" but got "+u+".")}),!0}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){var r=[],n=!0,i=!1,o=void 0;try{for(var s,a=t[Symbol.iterator]();!(n=(s=a.next()).done)&&(r.push(s.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}return r}return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();e.toType=r,e.doesElementExist=n,e.parseOptions=i}])});
</script>
او يمكن استخدام بدل كود السكرت استدعاء السكربت من هده الرابط!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.NTyped=e():t.NTyped=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=r(1),o=n(i);e.default=o.default,t.exports=e.default},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),o=r(2),s=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,t),this._stringPostion=0,this._arrayPosition=0,this._element=null,this._options=null,this._strings=null,this._timeout=null,(0,o.doesElementExist)(e)&&(0,o.parseOptions)(r,t.defaultOptions)&&(this._element=e,this._options=Object.assign({},t.defaultOptions,r),this._strings=this._options.strings,this.initialize())}return i(t,[{key:"initialize",value:function(){var t=this;this._options&&this._options.showCursor&&this.addCursorElement(),this._timeout=setTimeout(function(){t.writeCharacter(t._strings[t._arrayPosition],t._stringPostion)},this._options.startDelay)}},{key:"addCursorElement",value:function(){var t="<span class="+this._options.classes.cursor+">"+this._options.cursorChar+"</span>";this._element&&this._element.insertAdjacentHTML("afterend",t)}},{key:"writeCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){if(n._options.stringType===t.Types.HTML){var i=e.charAt(r);if("<"===i||"&"===i){for(var o="<"===i?">":";";e.charAt(r+1)!==o&&r+1<e.length;)r++;r++}}if(r===e.length){if(!n._options.loop&&n._arrayPosition===n._strings.length-1)return;n._timeout=setTimeout(function(){n.deleteCharacter(e,r)},n._options.backDelay)}else{var s=e.substr(0,r+1);n.setElementContent(s),r++,n.writeCharacter(e,r)}},this.getCharacterWriteSpeed(this._options.typeSpeed))}},{key:"deleteCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){var i=e.substr(0,r);if(n._options.stringType===t.Types.HTML&&">"===e.charAt(r)){for(;"<"!==e.charAt(r-1)&&r>0;)r--;r--}n.setElementContent(i),r>0?(r--,n.deleteCharacter(e,r)):(n._arrayPosition++,n._arrayPosition===n._strings.length&&(n._arrayPosition=0),n.writeCharacter(n._strings[n._arrayPosition],r))},this.getCharacterWriteSpeed(this._options.deleteSpeed))}},{key:"setElementContent",value:function(e){var r=this._element;this._options.stringType===t.Types.HTML?r.innerHTML=e:r.textContent=e}},{key:"getCharacterWriteSpeed",value:function(t){return Math.round(70*Math.random())+t}}]),t}();s.Types={HTML:0,TEXT:1},s.defaultOptions={stringType:s.Types.HTML,strings:["This is a typing animation!","You can also add your own sentences","So go do it!"],showCursor:!0,cursorChar:"|",loop:!0,startDelay:500,backDelay:500,typeSpeed:0,deleteSpeed:0,classes:{cursor:"title__cursor"}},e.default=s,t.exports=e.default},function(t,e){"use strict";function r(t){var e={}.toString.call(t).match(/\s([a-zA-Z]+)/);return e[1].toLowerCase()}function n(t){return!(!t||!(t.nodeName||t.prop&&t.attr&&t.find))}function i(t,e){return Object.entries(t).forEach(function(t){var n=o(t,2),i=n[0],s=n[1],a=e[i],u=r(s),l=r(a);if(l!==u)throw new Error('NativeTyped: Option "'+i+'" has wrong type. Should be '+l+" but got "+u+".")}),!0}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){var r=[],n=!0,i=!1,o=void 0;try{for(var s,a=t[Symbol.iterator]();!(n=(s=a.next()).done)&&(r.push(s.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}return r}return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();e.toType=r,e.doesElementExist=n,e.parseOptions=i}])});
</script>
| <script src="https://cdn.rawgit.com/abduallah789/move/efa859d2/move.js" type="text/javascript"></script> |
2- كود الستيل نضعه في المدونة, نبحث عن </head> ونضعها فوقه.
<style>
.mov-spa{
display: block;
margin: 13px 0;
}
.mov-div{
text-align: center;
display: -webkit-inline-box;
color: #000;
font-size: 30px;
}
.title__cursor{
display: -webkit-inline-box;
}
</style>
2- سكربت تشغيل النص
<script type="text/javascript">
document.write("<span class='mov-spa'><div class='mov-div' id='d-abduallah'> </div></span>");
new NTyped(document.querySelector('#d-abduallah'), {
strings: ['السلام عليكم ورحمة الله', 'اهلاء بكم في مدونة عبدالله منقوش', ' لاتنسوا ان تكونوا من متابعينا'],
// show cursor
showCursor: true,
cursorChar: '|',
// infinite loop
loop: true,
// animation options
startDelay: 500,
backDelay: 500,
typeSpeed: 0,
deleteSpeed: 0,
// CSS classes
classes: {
cursor: 'title__cursor'
}
});</script>
Id هو abduallah غيره او اضف رقم ليصبح abduallah2 مثال
<script type="text/javascript">
document.write("<span class='mov-spa'><div class='mov-div' id='d-abduallah2'> </div></span>");
new NTyped(document.querySelector('#d-abduallah2'), {
strings: [' حيث يمكنك أن تولد مثل هذا النص', 'لقد تم توليد هذا النص من ', 'هذا النص هو مثال لنص يمكن أن يستبدلة'],
// show cursor
showCursor: true,
cursorChar: '|',
// infinite loop
loop: true,
// animation options
startDelay: 500,
backDelay: 500,
typeSpeed: 0,
deleteSpeed: 0,
// CSS classes
classes: {
cursor: 'title__cursor'
}
});
</script>
strings: ['السلام عليكم ورحمة الله', 'اهلاء بكم في مدونة عبدالله منقوش', ' لاتنسوا ان تكونوا من متابعينا']
ملاحظة: لم يتم شرح الإضافة وتركيبه بتفصيل والسبب راجع إلى أن الإضافة موجهة لمطورين ولكن بأذن الله سنقود بتعديل الإضافة ونشرها إلى الجميع في موضوع أخر.
ليست هناك تعليقات:
إرسال تعليق