الكتابة التلقائية ، افضل اضافات بلوجر في 2017

بسم الله الرحمن الرحيم

السلام عليكم , منصة بلوجر في تطور و تجديد دائم ومستمر فكل يوم يظهر قالب جديد يحمل افكارا مختلفة عن غيره من القوالب , وكل يوم تظهر اضافات مميزة ورائعة تختلف عن سابقتها , وهذا الامر لابد منه لاستمرار عمل المنصة ، اليوم اقدم لكم اضافة احترافية  رائعة جدا يمكن استخدامها في مدونات بلوجر " الكتابة التلقائية " واحدة من الاضافات التي اثارت اعجابي كثيرا لبساطتها و مقدار الفائدة التي تقدمها ..

اضافة الكتابة التلقائية .. هي اضافة بسيطة تعتمد تقوم باعادة كتابة نص معين بطريقة بسيطة واحترافية في صورة مؤشر كتابة ، حيث يرسخ في ذهن الزائر انك تخاطبه مباشرة وتكتب له هذه العبارات في هذه اللحظة ، الاضافة يتم استخدامها في كثير من المواقع البرمجية الكبيرة مثل موقع 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}

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

<script>
$(function(){$(&quot;.element&quot;).typed({
strings: [&quot;مرحبا بكم متابعي مدونة ارشر&quot;, &quot;في مدونتي ارشر تجد كل ما تريده&quot;, &quot;من قوالب واضافات و شروحات حصرية&quot;, &quot;تخص منصة التدوين على بلوجر&quot;, &quot;اتمنى ان تعجبكم المدونة , ورمضان كريم :)&quot;],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>

بعد ذلك قم بحفظ القالب , واستمتع بالاضافة 😊

ودمتم في حفظ الله ورعايته

{ اكثر من قراءة القرءان في رمضان }

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

شارك المقال

شاركه على فيسبوكشاركه على جوجل+