كيفية عمل الكتابة التلقائية لمدونات بلوجر بأحترافية - عالم المدون

الخميس، 6 أبريل، 2017

كيفية عمل الكتابة التلقائية لمدونات بلوجر بأحترافية

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





شرح التركيب



  • أولا سوف تقوم بوضع الكود التالى فى مدونتك فوق الوسم التالى</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>


  • سوف تقوم بتعديل ما فى الكتابة بما تريدها فى هذا الكود
  • الأن الكود الثانى وسوف تضعه فوق الوسم التالى]]></b:skin>فى مدونتك


#about{background-color:#fff;padding-top:50px;padding-bottom:50px;background-image:url(https://2.bp.blogspot.com/-w57VuTGUWJ8/WNHPscEAxGI/AAAAAAAACs8/rIu5g-6PY1A4xUlWMUvZitFYgbm72pnwgCLcB/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}


  • الأن مع اخر كود وسوف تضعه فى المكان الذى تريده


<h2 class='type-wrap'>
<div class='element'/>
</h2>

  • وبعد ذلك تفوم بحفظ القالب ومبروك عليك الأضافة 


وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله 

لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 25 تعليق على موضوع : كيفية عمل الكتابة التلقائية لمدونات بلوجر بأحترافية

    اخر انا انتظر منك الاضافاة الى وعتنى انك سوف تنزلها شرح
    اخى اريد منك عمل شرح للاضافة دى بس تكون معربه لانى محتاجها ضرورى http://bit.ly/2mXUyBW

    أنت الأروع أخي x-)
    وحبيت أقولك ان بقي فية مشكلة في قالب نسيم المواضيع ذات الصلة بقي شكلها مش حلو والصور ساعات بتخرج برا الموضوع

    الموضوع بأذن الله أخى سوف يكون على المدونة غدا
    بعد ما تم تعريب الإضافه اليوم
    أنتظره غدا (o)

    شكرا لك :D
    وبخصوص قالب نسيم ضع رابط مدونتك لمعاينة المشكلة

    لا تعمل اخي وجربتاه علي اكثر من قالب :p

    الإضافة أخى تعمل بدون مشكلة كما تشاهدها فى مدونتى
    وايضا هى تعمل على قالب تجربيى هنا ايضا
    https://appwdbloog.blogspot.com.eg/

    حلو تصميم صور التدوينات عندكـ ؟؟
    لو تقول لينا كيف التصميم تبقا مشكوووور شكراااااا جزيلا وان غير ذك فات اهل لذلك الشكر بكل تاكيد :)

    التصميم سهل أخى انا فقط أستخدم برنامج الفوتشوب بدون أستخدام عليها أى اضافات

    الحمد لله تم حل مشكلة أن الإضافة لم تكن تعمل في القالب لدي ولكن أخي هناك مشكلة في أكواد ال css . الأكواد زائدة عن المطلوب .
    الأكواد التي قبل تلك الأكواد ليس لها فائدة .


    .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}

    اخى الكريم اريد منك فقط تعديل كود css الخاص بالون الى اللون الاسود واتركه بتعليق ولك جزيل الشكر

    أخى الفاضل أبحث عن هذا الوسم .type-wrap بعد وضع الأكواد
    سوف تجد أسفله كود color: #fff; غيره الى
    color: #000;

    اخي الكريم قمت بإضافت الكود الاخير بداخل ads-header لكن لم تعمل وهذه رابط مدونتى للمعاينة https://memo-elkhawaga.blogspot.com/
    قمت بإضافة الاكواد صحيحة

    دخلت الى مدونتك ولم أجد الكود كما قلت عليه
    وعليك ايضا على وضع كل كود مكان ads-header وايضا ليس بداخل
    بداخل الكود خطا جدا جدا
    عليك وضع أخر كود أسفل القائمة الرئيسية فى القالب الذى تستخدمه

    اخى الكريم لقد وضعت الاكواد اسفل القائمة الرئيسية من داخل صفحة الاكواد وضفتها ولكن لم تعمل وظهرت فارغة :-?

    تفضل رابط المدونة ولن الغى الكود المضاف الا بعد ردك
    http://www.memo-elkhawaga.ga/

    قالب نسيم أخى الفاضل يوجد به الكثير من أكواد الجافا سكربت
    لذلك قد تجد كود يمنع ظهور الإضافة قم بالتجربة على قالب اخر
    وانا لم أجرب الإضافة على قالب نسيم

    شكرا لك على ردك ولكن انا سأعمل على قالب نسيم فقط و عند تغيره سيكون بمرور الزمن بالشكل و بالتعديلات فقط و شكرا لك

    حسنا أخى الفاضل عندما أكون متفرغ سوف أجربها على قالب نسيم وأبحث فى المشكلة

    أخى الفاضل تم تجربة هذه الاضافة على قالب ( عالم المدون النسخة v5 ) ولم تعمل
    راجع الاكواد اخى الكريم لربما بها خطأ لان الانسان لا يخطئ

    اسف اخى لان الانسان يخطئ

    حسنا أخى الفاضل سوف أراجعها ولكنها تعمل

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر