بسم الله الرحمن الرحيم
السلام عليكم , منصة بلوجر في تطور و تجديد دائم ومستمر فكل يوم يظهر قالب جديد يحمل افكارا مختلفة عن غيره من القوالب , وكل يوم تظهر اضافات مميزة ورائعة تختلف عن سابقتها , وهذا الامر لابد منه لاستمرار عمل المنصة ، اليوم اقدم لكم اضافة احترافية رائعة جدا يمكن استخدامها في مدونات بلوجر " الكتابة التلقائية " واحدة من الاضافات التي اثارت اعجابي كثيرا لبساطتها و مقدار الفائدة التي تقدمها ..
اضافة الكتابة التلقائية .. هي اضافة بسيطة تعتمد تقوم باعادة كتابة نص معين بطريقة بسيطة واحترافية في صورة مؤشر كتابة ، حيث يرسخ في ذهن الزائر انك تخاطبه مباشرة وتكتب له هذه العبارات في هذه اللحظة ، الاضافة يتم استخدامها في كثير من المواقع البرمجية الكبيرة مثل موقع jokerdev.sa حيث يشاهد الزائر مجموعة من العبارات التي تكتب و تمسح في نفسة اللحظة ليكتب غيرها ...
لمعاينة الاضافة " من هنا "
شرح طريقة التركيب
نتوجه الى لوحة التحكم في بلوجر > المظهر > تحرير HTML ثم نضغط على مفتاحي Ctrl+F ونبحث عن الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة ...
#about{background-color:#fff;padding-top:50px;padding-bottom:50px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjn5UB3cieJ9RdwQJdOvpsVb62ziw6cVvcVH4uWkyibe1hwzKnfexpsC3FNExN9mlnpzb4ppxgxJLLk0Qn09j-NXxkR13AhdQoJ6A8e0nzcL-4ooF08SBaUkqWOOFcAYz2Mid-1nnaZVo2/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}
.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> ونلصق الكود التالي فوقه مباشرة ..
<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>
$(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>
بتغيير النص باللون الاحمر الى ماتريد
بعد ذلك نبحث عن الوسم <head> ونضع الكود التالي اسفله مباشرة ...
<link href='//www.fontstatic.com/f=bein-normal' rel='stylesheet' type='text/css'/>
واخيرا ,, وصلنا لمرحلة اظهار الاضافة , الكود التالي هو اللي سيظهر الاضافة حيث انه يمكنك وضعه في المكان الذي تريد , فمثلا اذا اردت وضعه في الاعلى كما في المعاينة ، ابحث عن الوسم <div id='post-wrapper'> والصق الكود التالي فوقه مباشرة ...
<h3 class='type-wrap' style='text-align:center;font-family:"bein-normal"'>
<div class='element'/>
</h3>
<div class='element'/>
</h3>
بعد ذلك قم بحفظ القالب , واستمتع بالاضافة 😊
ودمتم في حفظ الله ورعايته
{ اكثر من قراءة القرءان في رمضان }
