8/01/2018

settings_overscan print announcement
هل أنت من رواد مواقع التواصل ؟!! ..إذن لا بد أنك قد شاهدت تنسيق الطابع الزمني للمنشورات بهذا الشكل  "قبل ثانية" أو "قبل دقيقتين ..." في موقع التواصل الاجتماعي خاصةً تويتر و Facebook. يمثل هذا الوقت في الطوابع الزمنية التي تم نشرها قبل (وقت معين) بدلاً من إظهار التاريخ الكامل مثل 01/08/2018 09:00 م.

فعند نشر مقال ، سيتم عرضه قبل دقائق ، لذلك يمكن للقارئ أن يدرك أن مشاركتك تم نشرها قبل قليل. لا يمتلك البلوجر تمامًا هذه الميزة (تنسيق timeago) ، ولكنه بدل ذلك يوفر وقتًا مع التاريخ واسم الشهر وما إلى ذلك.




في هذا البرنامج التعليمي  سأوضح لك كيفية إضافة تنسيق الوقت النصي في مدونتك بإستخدام مكتبة timeago.js  المطورة بواسطة Ryan McGeary . سيعرض هذا النص الزمني الثانية والدقائق والساعات والأيام والسنوات (منذ كذا..) بدلاً من التاريخ الكامل. كما أنه يقوم تلقائيًا بتحديث الطوابع الزمنية..ومع ذلك أضفنا له وضيفة التحديث لحل بعض المشاكل منها الذين يستعملون زر إظهار المزيد للمواضيع بدلا من ترقيم الصفحات.


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن كود.html التالي أو جزء منه..ستجده مكرر أكثر من مرة

  • 
    <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'>
         <data:post.timestamp/>
    </abbr>
    

  • قم الآن بإضافة المعرف timeago إلى الكود السابق عند إيجاده مع تكرار العملية مع الجميع بالشكل التالي..

  • 
    <abbr class='timeago published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'>
         <data:post.timestamp/>
    </abbr>
    

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js
  • 
    <script>
    //<![CDATA[
    !function (t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof module&&"object"==typeof module.exports?require("jquery"):jQuery)}(function(t){function e(){var e=r.settings;if(e.autoDispose&&!t.contains(document.documentElement,this))return t(this).timeago("dispose"),this;var o=i(this);return isNaN(o.datetime)||(0===e.cutoff||Math.abs(n(o.datetime))<e.cutoff?t(this).text(a(o.datetime)):t(this).attr("title").length>0&&t(this).text(t(this).attr("title"))),this}function i(e){if(!(e=t(e)).data("timeago")){e.data("timeago",{datetime:r.datetime(e)});var i=t.trim(e.text());r.settings.localeTitle?e.attr("title",e.data("timeago").datetime.toLocaleString()):!(i.length>0)||r.isTime(e)&&e.attr("title")||e.attr("title",i)}return e.data("timeago")}function a(t){return r.inWords(n(t))}function n(t){return(new Date).getTime()-t.getTime()}t.timeago=function(e){return a(e instanceof Date?e:"string"==typeof e?t.timeago.parse(e):"number"==typeof e?new Date(e):t.timeago.datetime(e))};var r=t.timeago;t.extend(t.timeago,{settings:{refreshMillis:5e4,allowPast:!0,allowFuture:!1,localeTitle:!1,cutoff:0,autoDispose:!0,strings:{prefixAgo: null,prefixFromNow: null,suffixAgo: "ago",suffixFromNow: "from now",inPast: 'any moment now',seconds: "less than a minute",minute: "about a minute",minutes: "%d minutes",hour: "about an hour",hours: "about %d hours",day: "a day",days: "%d days",month: "about a month",months: "%d months",year: "about a year",years: "%d years",wordSeparator: " ",numbers: []}},inWords:function(e){function i(i,n){var r=t.isFunction(i)?i(n,e):i,o=a.numbers&&a.numbers[n]||n;return r.replace(/%d/i,o)}if(!this.settings.allowPast&&!this.settings.allowFuture)throw"timeago allowPast and allowFuture settings can not both be set to false.";var a=this.settings.strings,n=a.prefixAgo,r=a.suffixAgo;if(this.settings.allowFuture&&e<0&&(n=a.prefixFromNow,r=a.suffixFromNow),!this.settings.allowPast&&e>=0)return this.settings.strings.inPast;var o=Math.abs(e)/1e3,s=o/60,u=s/60,m=u/24,l=m/365,d=o<45&&i(a.seconds,Math.round(o))||o<90&&i(a.minute,1)||s<45&&i(a.minutes,Math.round(s))||s<90&&i(a.hour,1)||u<24&&i(a.hours,Math.round(u))||u<42&&i(a.day,1)||m<30&&i(a.days,Math.round(m))||m<45&&i(a.month,1)||m<365&&i(a.months,Math.round(m/30))||l<1.5&&i(a.year,1)||i(a.years,Math.round(l)),h=a.wordSeparator||"";return void 0===a.wordSeparator&&(h=" "),t.trim([n,d,r].join(h))},parse:function(e){var i=t.trim(e);return i=i.replace(/\.\d+/,""),i=i.replace(/-/,"/").replace(/-/,"/"),i=i.replace(/T/," ").replace(/Z/," UTC"),i=i.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"),i=i.replace(/([\+\-]\d\d)$/," $100"),new Date(i)},datetime:function(e){var i=r.isTime(e)?t(e).attr("datetime"):t(e).attr("title");return r.parse(i)},isTime:function(e){return"time"===t(e).get(0).tagName.toLowerCase()}});var o={init:function(){o.dispose.call(this);var i=t.proxy(e,this);i();var a=r.settings;a.refreshMillis>0&&(this._timeagoInterval=setInterval(i,a.refreshMillis))},update:function(i){var a=i instanceof Date?i:r.parse(i);t(this).data("timeago",{datetime:a}),r.settings.localeTitle&&t(this).attr("title",a.toLocaleString()),e.apply(this)},updateFromDOM:function(){t(this).data("timeago",{datetime:r.parse(r.isTime(this)?t(this).attr("datetime"):t(this).attr("title"))}),e.apply(this)},dispose:function(){this._timeagoInterval&&(window.clearInterval(this._timeagoInterval),this._timeagoInterval=null)}};t.fn.timeago=function(t,e){var i=t?o[t]:o.init;if(!i)throw new Error("Unknown function name '"+t+"' for timeago");return this.each(function(){i.call(this,e)}),this},document.createElement("abbr"),document.createElement("time")});
    
    //THIS IS RAN Timeago
    function refreshData(){
     var tm = 1,  // 1 second
         id = $(".timeago");
         id.timeago();
    jQuery.timeago.settings.strings = {
            prefixAgo:null,
            prefixFromNow:null,
            suffixAgo:"تقريبا",
            suffixFromNow:"من الآن",
            inPast:'في اي لحظة الان',
            seconds:"منذ أقل من دقيقة",
            minute:"منذ دقيقة",
            minutes:"منذ %d دقيقة",
            hour:"منذ ساعة",
            hours:"منذ %d ساعة",
            day:"منذ يوم",
            days:"منذ %d يوم",
            month:"منذ  شهر",
            months:"منذ %d أشهر",
            year:"منذ سنة",
            years:"منذ %d سنة",
    };
        setTimeout(refreshData, tm*1000);
    }refreshData(); // execute function
    //]]> 
        </script>
    

    التعديل على الكود
    الكود المحدد بهذا اللون للعرض باللغة العربية إذا أردت اللغة الإنجليزية قم فقط بحذفه كماهو محدد وستلاحظ أن العبارات تغيرت للأجنبية أما في حال أردت لغات أخرى عليك بترجمة الكلمات يدويا.
    ملاحظة للمطور
    لقد قمنا بوضع عنصر التشغيل داخل وضيفة التحديث التلقائي setTimeout في زمن حددناه بـثانية tm*1000 وذلك للضغط على المكون الإضافي حتى يشتغل مرة أخرى أثناء جلب عناصر الموضوع من العدم وهذا إستثنائي في القوالب التي تستخدم زر إظهار المزيد بدلا من ترقيم الصفحات.


    report
    إذا أردت سكريبت المكتبة timeago.js بدون ضغط قم بتحميله من حاوية التحميل في القائمة الجانبية كما أنصحك بزيارة صفحة المطور على موقع github



add_commentإرسال تعليق

  1. السلام عليكم .
    أولاً موضوع جميل جدا سلمت يداك .
    ثانياً كل عام وانت بصحة وسلامة وبألف خير بمناسبة عيد الأضحي المبارك.
    --------> وبعد .. <--------
    سؤال 1 : متي النسخة الثانية من ال BLANK TEMPLATE.
    سؤال 2 : هل من الممكن تقديم دورة او دروس لدورة بلوجر ؟
    سؤال 3 : هل مدونة أ/ ياسين الخاصة بالتصميم بالفوتوشوب ملك لك وإن كان كذلك فأرجو منك تحسين القالب الخاص بها لأنه بطئ جداً.
    وأسف إن كنت أثقل عليك لكن من الضروري حقاً ان أعرف الإجابة <=) ولك مني خالص التحية أخوك محمد.
    وكل عام وأنت بخير. =(

    ردحذف
    الردود
    1. مرحبا عيد مبارك وكل عام وانت بالف خير وكل الأمة الإسلامية بألف خير

      جواب 1 : بمجرد الإنتهاء من بعض المشاريع المهمة سننشر الإصدار الثاني من قالب BLANK TEMPLATE مع بعض المزايا والهدايا المجانية
      جواب 2 : ممكن تقديم دورات حول بناء القوالب والإضافات مستقبلا ..فلا تنسى نحن فقط في بداية المشوار نسأل الله التوفيق لنا وللجميع
      جواب 3 : مدونة ياسين الخاصة بالتصميم بالفوتوشوب ملك لأخي هي بطيئة بسبب ثقل الصور وقريبا سننشر إصدارها الجديد.
      وفي الأخير أشكرك على إهتمامك وأحييك على كونك تملأ وقتك بالمحتوى الهادف. ;)

      حذف
  2. أخي هناك تعارض بين هذا الكود ومكتبة ال jquery 3.3.1 حاولت كثيراً لكن لم أستطع حل المشكلة أحتاج إلي مساعدتك وشكرا لك .
    var select = function(s) {
    return document.querySelector(s);
    },
    selectAll = function(s) {
    return document.querySelectorAll(s);
    },
    animationWindow = select('#animationWindow'),
    animData = {
    wrapper: animationWindow,
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/play_fill_loader.json',
    rendererSettings: {
    //context: canvasContext, // the canvas context
    //scaleMode: 'noScale',
    //clearCanvas: false,
    //progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    //hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
    }
    }, anim;

    anim = bodymovin.loadAnimation(animData);
    anim.addEventListener('DOMLoaded', onDOMLoaded);
    anim.setSpeed(1);

    function onDOMLoaded(e){

    anim.addEventListener('complete', function(){});
    }

    ScrubBodymovinTimeline(anim)

    ردحذف
  3. ممكن طريقة اظافة خاصية Load More Posts "إظهار المزيد" مثل في قالبك

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

      إذا واجهت مشكلة في التركيب أضفني كمشرف وسأقوم أنا بالعمل نيابة عنك.
      مع العلم أني سأخصص تدوينة لشرح ذلك مع سكربت جديد ^_^

      حذف