إذا كنت قد أنشأت ورقة أنماط CSS لموقع ويب ، فقطعا ستكون على دراية بفكرة إنشاء ورقة أنماط معينة ليتم تشغيلها في ظل ظروف معينة مثل خاصية استعلامات الوسائط ومن المستحيل حصرها نظرا للإمكانيات التي يجلبها CSS3 .. لذلك سنبدأ بالمستوى الإبتدائي في هذا البرنامج التعليمي لنعرف أسس تقنية تستخدم جزءًا من CSS3 غير مدعومة بواسطة Internet Explorer 8 وهي ببساطة القاعدة media لجعل مدونتك متجاوبة مع شاشات العرض في الأجهزة اللوحية و الهواتف الذكية مثل ipad / iphon / galaxy..الخ أو لتنسيق صفحة الموضوع لتصبح جاهزة للطباعة print . للعلم أنه تم تمكين هذه الوظيفة في CSS2 لتسمح لك بتحديد نوع الوسائط المراد إستهدافها ، بحيث يمكنك استهداف الطباعة والمحمول وما إلى ذلك.
هل أنت من رواد مواقع التواصل ؟!! ..إذن لا بد أنك قد شاهدت تنسيق الطابع الزمني للمنشورات بهذا الشكل "قبل ثانية" أو "قبل دقيقتين ..." في موقع التواصل الاجتماعي خاصةً تويتر و Facebook. يمثل هذا الوقت في الطوابع الزمنية التي تم نشرها قبل (وقت معين) بدلاً من إظهار التاريخ الكامل مثل 01/08/2018 09:00 م.
فعند نشر مقال ، سيتم عرضه قبل دقائق ، لذلك يمكن للقارئ أن يدرك أن مشاركتك تم نشرها قبل قليل. لا يمتلك البلوجر تمامًا هذه الميزة (تنسيق timeago) ، ولكنه بدل ذلك يوفر وقتًا مع التاريخ واسم الشهر وما إلى ذلك.
في هذا البرنامج التعليمي سأوضح لك كيفية إضافة تنسيق الوقت النصي في مدونتك بإستخدام مكتبةtimeago.js المطورة بواسطة Ryan McGeary . سيعرض هذا النص الزمني الثانية والدقائق والساعات والأيام والسنوات (منذ كذا..) بدلاً من التاريخ الكامل. كما أنه يقوم تلقائيًا بتحديث الطوابع الزمنية..ومع ذلك أضفنا له وضيفة التحديث لحل بعض المشاكل منها الذين يستعملون زر إظهار المزيد للمواضيع بدلا من ترقيم الصفحات.
لاتنسى أخذ نسخة إحتياطية من القالب
الخطوة الأولى
قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير Edit HTML
إضغط في وسط محرر الأكواد ثمF + Ctrl لإضهار مربع البحث
بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب
لاتنسى أخذ نسخة إحتياطية من القالب
الخطوة الثانية
قم بالبحث عن كود.html التالي أو جزء منه..ستجده مكرر أكثر من مرة
قم بالبحث عن هذا الوسم </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
أهلا أصدقائي .. في هذا البرنامج التعليمي الخاص بمكتبة OwlCarousel.js والذي هو عبارة عن سلسلة من الدروس المبسطة التي سبق وشرحنا في السلسلة الأولة الخاصة بالإصدار 1.3.3 المواضيع التالية:
-سلسلة دروس مكتبة OwlCarousel.js الإصدار 1.3.3
-الدرس الأول // مكتبة OwlCarousel.js الإصدار [1.3.3] تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة.
-الدرس الثاني // تركيب سلايدر شو تلقائي featured-slider بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]
-الدرس الثالث // تركيب أداة مقالات ذات صلة related article بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]
-الدرس الرابع // تركيب سلايدر مستعرض مواضيع ديناميكي Dynamic Slider بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]
عليك مراجعتها حتى تتوسع عندك المدارك حول هذا المكون بصفة عامة وخصوصا الدرس الأول .
أهلا أصدقائي .. في هذا البرنامج التعليمي سنكتشف مكتبة OwlCarousel.js والتي هي عبارة عن مكوّن إضافة jQuery مساعد مثل مكتبات modernizr و bootstrap و niceScroll.js التي سبق شرحها وغيرها من المكتبات المميزة الأخرى التى سنشرحها مستقبلا..الغرض من هذه المكتبة الرائعة حقن عنصر الإنزلاق في الأدوات والإضافات المراد تهيئتها أو إظهارها على شكل سلايدر شو متحرك أي أن هذه المكتبة تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة. الإصدار الذي نعرضه عليكم 1.3.3 وهو المفضل عندي شخصيا لسبب أنه غير متعارض مع أغلب السكريبتات.. بالعلم أن الإصدار 2.x.x لا يعتبر متوافقًا مع الإصدار السابق1.x.x إلا أن الفكرة تظل كما هي ، ولها الكثير من القواسم المشتركة مع Owl1 ، لكن السكريبت الأساسي أعيد كتابته من الصفر.
المميز في هاته المكتبة سرعتها وطريقة تجاوبها السلسة مع كل الأجهزة أضف إمكانية تخصيص دينامكية العمل من خلال كود ترتيب المعلمات .
أهلا أصدقائي .. في هذا البرنامج التعليمي سنكتشف سكريبت Sticky Sidebar الإصدار v1.7.0 والذي يعمل على صمغ أو تثبيت القوائم الجانبية لموقعك على الويب (أو أي عمود رأسي لهذه المسألة) ، مما يجعلها مرئية بشكل دائم عند التمرير للأعلى أوللأسفل. قمن المفيد جدا عندما يكون الشريط الجانبي طويلاً جدًا أو قصيرًا جدًا مقارنة ببقية المحتوى إستعمال هذه الميزة . كما أن السكريبت يعمل مع أي تصميم تقريبًا ويدعم العديد من الأشرطة الجانبية .. وهو متوفر أيضًا كمكون WordPress الذي يأتي مع لوحة الاستخدام.. أضف أنه داعم للمتصفحات و الذي أبهرني في هذا السكريبت دقته الذكية أو خوارزمية حساب الأبعاد لكل موضع يتم تفعيل عليه الخاصية وهذا إنعكس بإحترافية على التجاوب مع شاشات العرض الذكية وتكون النتيجة إفتراضية أي وكأنه غير موجود .. أضف أنك تستطيع تفعيل ميزة Sticky Sidebar على أكثر من قائمة خصوصا للقوالب التي صممت بقائمتين .. إذا فالنبدأ بالشرح.
