طريقة اضافة الكتابة المتحركة الى قوالب بلوجر بشكل انيق مثل مدونة الياز برو 2018

طريقة اضافة الكتابة المتحركة الى قوالب بلوجر بشكل انيق مثل مدونة الياز برو 

طريقة اضافة الكتابة المتحركة الى قوالب بلوجر بشكل انيق مثل مدونة الياز برو 

طريقة اضافة الكتابة المتحركة الى قوالب بلوجر بشكل انيق مثل مدونة الياز برو: موضوع اليوم يخص بلوجر ويخص على وجه الخصوص الكتابة المتحركة التي اصبح يبحث المدونون على طريقة اضافتها للقوالب لانها تعطي جمالية للقالب ويظهر بشكل احترافي،سنشرح اسهل طريقة اضافتها.

اذا لم يكن هذا الكود في القالب الخاص به فيجب اضافته اسفل HEAD

<link href='//www.fontstatic.com/f=bein-normal' rel='stylesheet' type='text/css'/>

الكود التاني الخاص ب CSS نضيفه فوق الكود ]]></b:skin>

#about{background-color:#fff;padding-top:50px;padding-bottom:50px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO0ykYSQ33kxgvNVB02hPM_UewI1GsT9Mz2_g8AVTywG7TmPbefgOfBEkvcr4gq7L_Lict28DX2EYknC00TGjelp_CGugjpHH7ktFzTfWcSpVjRWZbeYjAudygAJdkbZ-BQLJWhyphenhyphen5rO7Iw/s1600/wdbloog.png)!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important;transition:opacity .5s ease 0;overflow:hidden;margin-bottom: 15px;} .vc_column-inner{padding-top:35px;text-align:center} #countdown-timer{font-weight:700;margin:0 -30px;display:inline-block} #countdown-timer >.countdown-section{display:block;float:left;font-size:62px;line-height:1;color:#fff;margin:0 30px} .countdown-section i{background-color: #FFFFFF;font-size:40px;color:#5A67A6;border-radius:50%;width:80px;height:80px;line-height:80px;margin-bottom:10px;padding-left:3px} #countdown-timer >.countdown-section >.countdown-period{display:block;font-size:22px;margin-top:8px;line-height:1;text-transform:uppercase;letter-spacing:1px;color:#fff;font-weight:500} .type-wrap{color:#FFF;font-size:63px;line-height:124px;font-weight:900;min-height:119px} .element{direction:rtl;display:inline-block} .typed-cursor{opacity:1;color:#7B88CC;font-weight:100;-webkit-animation:blink 0.7s infinite;-moz-animation:blink 0.7s infinite;-ms-animation:blink 0.7s infinite;-o-animation:blink 0.7s infinite;animation:blink 0.7s infinite} .item #about,.error_page #about,.static_page #about{display:none}

ثم البحث على وسم </body>  واضافة الكود التالي فوقه مباشرة

code here <script>$(function(){$(".element").typed({ strings: ["مرحبا بكم في موقع إليازبرو", "عالم التقنية بحلة جديدة", "شروحات حصرية", "مواضيع تقنية", "احتراف الربح من الانترنت ","احتراف بلوجر ", "ويندوز ", "تطبيقات أندرويد ", "الحماية "," انترنت و برامج "," حلول مشاكل و ألعاب ",],typeSpeed:50,loop: true,});}); /*<![CDATA[*/ ! function(b){var a = function(d,c){this.el = b(d);this.options = b.extend({} ,b.fn.typed.defaults,c);this.isInput = this.el.is("input");this.attr = this.options.attr;this.showCursor = this.isInput ? false:this.options.showCursor;this.elContent = this.attr ? this.el.attr(this.attr):this.el.text();this.contentType = this.options.contentType;this.typeSpeed = this.options.typeSpeed;this.startDelay = this.options.startDelay;this.backSpeed = this.options.backSpeed;this.backDelay = this.options.backDelay;this.strings = this.options.strings;this.strPos = 0;this.arrayPos = 0;this.stopNum = 0;this.loop = this.options.loop;this.loopCount = this.options.loopCount;this.curLoop = 0;this.stop = false;this.cursorChar = this.options.cursorChar;this.shuffle = this.options.shuffle;this.sequence = [];this.build()} ;a.prototype ={constructor:a,init:function(){var c = this;c.timeout = setTimeout(function(){for (var d = 0;d < c.strings.length;++d){c.sequence[d] = d} if (c.shuffle){c.sequence = c.shuffleArray(c.sequence)} c.typewrite(c.strings[c.sequence[c.arrayPos]],c.strPos)} ,c.startDelay)} ,build:function(){if (this.showCursor === true){this.cursor = b('<span class="typed-cursor">' + this.cursorChar + "</span>");this.el.after(this.cursor)} this.init()} ,typewrite:function(d,e){if (this.stop === true){return} var f = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;var c = this;c.timeout = setTimeout(function(){var i = 0;var l = d.substr(e);if (l.charAt(0) === "^"){var k = 1;if (/^\^\d+/.test(l)){l = /\d+/.exec(l)[0];k += l.length;i = parseInt(l)} d = d.substring(0,e) + d.substring(e + k)} if (c.contentType === "html"){var h = d.substr(e).charAt(0);if (h === "<" || h === "&"){var g = "";var j = "";if (h === "<"){j = ">"} else{j = ";"} while (d.substr(e).charAt(0) !== j){g += d.substr(e).charAt(0);e++} e++;g += j}} c.timeout = setTimeout(function(){if (e === d.length){c.options.onStringTyped(c.arrayPos);if (c.arrayPos === c.strings.length - 1){c.options.callback();c.curLoop++;if (c.loop === false || c.curLoop === c.loopCount){return}} c.timeout = setTimeout(function(){c.backspace(d,e)} ,c.backDelay)} else{if (e === 0){c.options.preStringTyped(c.arrayPos)} var m = d.substr(0,e + 1);if (c.attr){c.el.attr(c.attr,m)} else{if (c.isInput){c.el.val(m)} else{if (c.contentType === "html"){c.el.html(m)} else{c.el.text(m)}}} e++;c.typewrite(d,e)}} ,i)} ,f)} ,backspace:function(d,e){if (this.stop === true){return} var f = Math.round(Math.random() * (100 - 30)) + this.backSpeed;var c = this;c.timeout = setTimeout(function(){if (c.contentType === "html"){if (d.substr(e).charAt(0) === ">"){var g = "";while (d.substr(e).charAt(0) !== "<"){g -= d.substr(e).charAt(0);e--} e--;g += "<"}} var h = d.substr(0,e);if (c.attr){c.el.attr(c.attr,h)} else{if (c.isInput){c.el.val(h)} else{if (c.contentType === "html"){c.el.html(h)} else{c.el.text(h)}}} if (e > c.stopNum){e--;c.backspace(d,e)} else{if (e <= c.stopNum){c.arrayPos++;if (c.arrayPos === c.strings.length){c.arrayPos = 0;if (c.shuffle){c.sequence = c.shuffleArray(c.sequence)} c.init()} else{c.typewrite(c.strings[c.sequence[c.arrayPos]],e)}}}} ,f)} ,shuffleArray:function(f){var c,e,d = f.length;if (d){while (--d){e = Math.floor(Math.random() * (d + 1));c = f[e];f[e] = f[d];f[d] = c}} return f} ,reset:function(){var c = this;clearInterval(c.timeout);var d = this.el.attr("id");this.el.after('<span id="' + d + '"/>');this.el.remove();if (typeof this.cursor !== "undefined"){this.cursor.remove()} c.options.resetCallback()}} ;b.fn.typed = function(c){return this.each(function(){var f = b(this),e = f.data("typed"),d = typeof c == "object" && c;if (!e){f.data("typed",(e = new a(this,d)))} if (typeof c == "string"){e[c]()}} )} ;b.fn.typed.defaults ={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],typeSpeed:0,startDelay:0,backSpeed:0,shuffle:false,backDelay:500,loop:false,loopCount:false,showCursor:true,cursorChar:"|",attr:null,contentType:"html",callback:function(){} ,preStringTyped:function(){} ,onStringTyped:function(){} ,resetCallback:function(){}}} (window.jQuery); /*]]>*/ </script></br><input type="button" name="selectit" value="تحديد الكل" onclick="selectAll ();"></form><br /><br /><br /><br /><br /><br /><br /></div>

يبقى المكان الذي يظهر فيه الكود المستعمل ويمكنك الاختيار حسب المكان الذي يناسبك ويمكنك اختيار احد هذين الكودين

<div id='post-wrapper'> <div class='all-container'> <h3 class='type-wrap' style='text-align:center;font-family:"bein-normal"'><div class='element'/></h3>

الكود الاول في هذين الكودين هو اسفال البارموني والكود التاني لظهور الكتابة اعلى المدونة مثل مدونة اليازبرو.

شاهد الشرح للتفاصيل