إذا كنت قد أنشأت ورقة أنماط CSS لموقع ويب ، فقطعا ستكون على دراية بفكرة إنشاء ورقة أنماط معينة ليتم تشغيلها في ظل ظروف معينة مثل خاصية استعلامات الوسائط ومن المستحيل حصرها نظرا للإمكانيات التي يجلبها CSS3 .. لذلك سنبدأ بالمستوى الإبتدائي في هذا البرنامج التعليمي لنعرف أسس تقنية تستخدم جزءًا من CSS3 غير مدعومة بواسطة Internet Explorer 8 وهي ببساطة القاعدة media لجعل مدونتك متجاوبة مع شاشات العرض في الأجهزة اللوحية و الهواتف الذكية مثل ipad / iphon / galaxy..الخ أو لتنسيق صفحة الموضوع لتصبح جاهزة للطباعة print . للعلم أنه تم تمكين هذه الوظيفة في CSS2 لتسمح لك بتحديد نوع الوسائط المراد إستهدافها ، بحيث يمكنك استهداف الطباعة والمحمول وما إلى ذلك.
أداة خريطة الموقع أو فهرس المحتويات للمدونة مع ترقيم الصفحات Blogger Archive with Pagination سكريبت أصلي وعتيق أضعه لكم مجانا وبإصداره الجديد مع طريقة عرض دينامكية بحيث يمكن تخصيص الألوان وإتجاه اللغة عربي أو أجنبي كما يمكن جعل الأداة تعرض قسم معين بدلا من عرض كامل للمنشورات . والميزة الأهم في الإضافة هي طريقة العرض السهلة وذلك عن طريق التنقل الرقمي دون إعادة تحميل الصفحة كاملة. كما أحيطك علما أنه يمكنك تحميل الأكواد الخاصة بهذه الأداة كنسخة إحتياطية على جهازك ستجد الأكواد بدون ضغط أو تشفير ليسهل قرائتها أو التعديل فيها.
مرحبا إخواني .. نحيطكم علما أن النسخة الكاملة لأداة King guard الخاصة بحماية القوالب أصبحت جاهزة بسعر لايتجوز $5 كعرض محدود .. سعر خيالي لمشروع بذلنا فيه كل الجهد والوقت لغرض وهدف واحد يتخطى الماديات أنت تدركه.. والحمد لله وفقنا الله فيه والدليل أننا نستخدمه على قالب مدونتنا هذه مدونة بلوجر كود بالإضافة إلى قوالب أخرى وكلها تعمل بدون مشاكل .. كما أحيطكم علما خصوصا للذين قاموا بتحميل النسخة المجانية أن هذه النسخة الكاملة مختلفة جذريا من حيث الشكل والخوارزمية أضفنا فيها مايزيد في إمكانياتها وحذفنا منها ما لاداعي فيه..ونشكر من القلب 💛 كل من ساهم ولو بكلمة طيبة في هذا المشروع..بوركتم.
close
تنويه...النسخ التجربية السابقة لم تعد معتمدة بعد إطلاق الإصدار الأول من النسخة الكاملة وذلك بسبب أننا قمنا ببعض التعديلات كي تتماشى النسخ مع بعضها..فالرجاء قم بإعادة طلب النسخة التجربية إذا أردت الدخول في العرض الخاص.
تعريف سريع بالمشروع
*- أداة King guard لحماية قوالب البلوجر | أداة حصرية على مستوى الويب تتيح لك حماية حقوق مشاريعك على منصة البلوجر سواء كانت قوالب أو إضافات والمميز فيها أنها تمنحك التحكم الكامل في تشغيل هاته المشاريع أو تعطيلها وكل ذلك عن بعد ودون أن تسجل حسابك على Gmail
الرخصة
*- النسخة كاملة بجميع المميزات سيتم تسجيلها بإسمك ومحمية برقم تعريف فريد تجده أسفل الصفحة..كما أنه لايمكنك مشاركة هذه النسخة لأن ذلك يعني كسر لإتفاقية الإستخدام هذا من جهة ومن جهة أخرى يمكن لأي أحد أن يتلاعب بقاعدة بيانتك ويسبب لك مشاكل مع عملائك فإحذر أن تنشر نسختك..أضف أنك ستحصل على جميع التحديثات المستقبلية مجانا ومنها الإشعارات والإضافات الملحقة بالنسخة. كما أننا نحيطك علما بأن أكواد الأداة محمية لكن مايهمك أنت شفرة التفعيل فهي مفتوحة المصدر وكاملة والأهم من ذلك كله سكريبت التطبيق فهو مفتوح المصدر وبدون تشفير إذا أحسنت قرائته يمكنك إستخدامة في عدة مشاريع خاصة بك أي يمكنك تخصيصه كشوكة لقاعدة بيانات خارج بيئته كما فعلنا نحن بالضبط..أليس هذا رائعا.
مميزات الأداة
- ثلاث طبقات حماية للقالب بخوارزمية شرطية معقدة.
- سكريبت لإنشاء قاعدة بيانات مفتوح المصدر مع إمكانية التخصيص خارج بيئته كما أنه يرسل إشعارات للعملاء دفعة واحدة.
- التحكم الكامل في مشاريعك (قوالب .. إضافات .. أدوات) بحيث يمكنك تعطيلها بضغطة زر.
- حقن علامة الحقوق وتوقيع المصمم في تذييل القالب تلقائيا مع إمكانية تخصيص النمط والوضع.
- غرفة خاصة بصنع رخص التفعيل.
- سهولة تخصيص النموذج الخاص بطلب مشاريعك وكذلك تخصيص الرسائل والإشعارات.
- غرفة الشوكة لمراجعة بيانات العملاء مع إمكانية تعطيل أو تشغيل القالب دون التوجه إلى قاعدة بياناتك على google.
- غرفة لحفظ بيانات عملائك في حال فقدت حسابك الشخصي أو تعطل الخدمة.
- مشاريعك محمية بكلمة سر ذات تنسيق معقد من إختيارك بحيث لايستطيع أحد التحكم فيها حتى لو حصل على رابط التطبيق.
- لقد تعبت..ستجد المزيد من المميزات وطريقة كاملة لشرح الأداة وكيف تتعامل معها من خلال نقاط المساعدة.
معلومات تحتاج معرفتها
الأداة عبارة عن ملف index لكن تحتاج إلى الأنترنت لتعمل بدون مشاكل.
لاتتوفر معاينة للأداة لكن يمكنك الحصول على النسخة التجربية من هنا.
الأداة محمية بإسمك ومسجلة تحت رقم عميل فريد لايجب مشاركتها أو التعديل فيها
الأداة مشفرة لكن مايهمك أنت سكربت الحماية وسكربت التطبيق ستجدهما مفتوحين المصدر يمكنك التعديل على راحتك.
يستطيع المشتري الحصول على أي نسخة قادمة من الأداة مجانا بالإضافة إلى الملحقات التي سندرجها مثلا- مطبخ المصمم-
يتم اعتماد دعم فني للعميل بدون فترة محددة مجانا ( لتعديل الاخطاء ان وجدت او لتوضيح إشكال )
شرح مصور للمشروع
يمكنك مراجعة طريقة التعامل مع الأداة من خلال هذه السلسلة المصورة إضغط على الزر لمشاهدة جميع الأجزاء أو الإنتقال لفيديو طريقة تفعيل النسخة الكاملة
طلب نسخة
أطلب نسختك
سننتقل بك إلى صفحة تحتوي على نموذج بسيط من خلاله تضع فقط إسمك والبريد الإلكتروني الخاص بك لكي نتواصل معك ونرسل لك فيه نسختك . عند الإنتهاء من وضع بياناتك إضغط على زر الإرسال .. وسنتواصل معك في أقرب وقت ممكن لإكمال الإجراءات. أرسل بياناتك عند إرسال بياناتك يمكنك شراء نسخة عن طريق
مرحبا إخواني وكل عام وأنتم بخير في موضوعنا سأقدم لكم عرض لايقدر بثمن وهو فرصة للحصول على أداة حصرية دورها حماية قوالب البلوجر من السرقة وفرصة كذلك لتكتشف أسرار حماية القوالب التي يمنع نشرها أو تشاركها أو حتى أنك لا تجدها معروضة للبيع.. لكننا في مدونة بلوجر كود سنكسر هذه القاعدة الساذجة ونعطي فرصة لعشاق التصميم و التطوير كي يقدموا مشاريعهم المحتكرة دون خوف من سرقتها . والرائع في الأداة هو أنك تستطيع وضع المشروع الخاص بك مثلا - قالب - أو - إضافة - للإستخدام التجريبي لمدة معينة ثم تعطيله بضغطة زر ... أليس هذا رائعا...وجود إمكانية تجربة المشاريع الأصلية قبل شرائها .. فمن جهة يحصل العميل على تجربة مباشرة والتأكد أنه سيضع ماله في المنتج المناسب ومن جهة أخرى يبقى المصمم مطمئن البال من عدم سرقة مشروعه لأن في يده إمكانية تعطيل القالب عن بعد وذلك أشبه مايكون بالقابس 😋
check
تحديث...لقد تم الإنتهاء من النسخة الكاملة وهي الآن في الإصدار الأول لها يمكنك مراجعة الموضوع من هنا
close
تنويه...النسخ التجربية السابقة لم تعد معتمدة بعد إطلاق الإصدار الأول من النسخة الكاملة وذلك بسبب أننا قمنا ببعض التعديلات كي تتماشى النسخ مع بعضها..فالرجاء قم بإعادة طلب النسخة التجربية إذا أردت الدخول في العرض الخاص.
تعريف سريع بالمشروع
*- أداة King guard لحماية قوالب البلوجر | أداة حصرية على مستوى الويب تتيح لك حماية حقوق مشاريعك على منصة البلوجر سواء كانت قوالب أو إضافات والمميز فيها أنها تمنحك التحكم الكامل في تشغيل هاته المشاريع أو تعطيلها وكل ذلك عن بعد ودون أن تسجل حسابك على Gmail
الرخصة
*- النسخة تجربية.. الغرض منها إعطاء فرصة مشاركتنا في تحسين النسخة الكاملة من خلال تقديم إقتراحاتك وتفقد الأخطاء الممكنة وفي المقابل ستحصل على النسخة الكاملة مع التحديثات المستقبلية - مجانا- بالإضافة إلى تسجيلك كداعم ومطور للمشروع .. للبدأ في تنزيل النسخة التجربية يرجى أولا مشاهدة بعض الفيديوهات حول طريقة عمل المشروع ثم بعده أدخل معنا في العرض الخاص.
شرح مصور للمشروع
يمكنك مراجعة طريقة التعامل مع الأداة من خلال هذه السلسلة المصورة إضغط على الزر لمشاهدة جميع الأجزاء أو الإنتقال لفيديو طريقة تفعيل النسخة الكاملة
العرض الخاص
العرض الخاص
نتيح لك فرصة الحصول على النسخة الكاملة مع التحديثات - مجانا- بالإضافة إلى تسجيلك كداعم ومطور للمشروع فقط ماعليك سوى تخصيص وقت في تفقد ثغرات الآمان أو الأخطاء التقنية ومع أول مساهمة لك ستحصل على ماوعدناه لك .. للبدأ في تنزيل النسخة التجربية يرجى مراسلتنا من خلال البريد الخاص . كما أننا نطلب منك الإذن في إدراجك كمساهم في جدول البيانات. أطلب النسخة
هل أنت من رواد مواقع التواصل ؟!! ..إذن لا بد أنك قد شاهدت تنسيق الطابع الزمني للمنشورات بهذا الشكل "قبل ثانية" أو "قبل دقيقتين ..." في موقع التواصل الاجتماعي خاصةً تويتر و 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]
عليك مراجعتها حتى تتوسع عندك المدارك حول هذا المكون بصفة عامة وخصوصا الدرس الأول .
هل سبق لك أن حاولت إدراج شفرة إعلان جافا سكريبت مباشرة في نموذج Blogger الخاص بك ولن ينجح؟ حسنًا ، لا تقلق فلطالما كانت هذه مشكلة كبيرة بالنسبة إلى مؤلفي المدونات الذين يستخدمون Google Blogger والذين يتطلعون إلى تحقيق الدخل من موقعهم نظرًا لأن شفرة الإعلان كلها تحتوي على جافا سكريبت. كانت المشكلة في الماضي هي أن مستخدمي Blogger يريدون المزيد من التحكم في مكان تكرار ظهور شفرة الإعلان (عادةً ما تكون AdSense) ومدى تكرار ذلك.
مرحبا إخواني..لا شك أنك تدرك دور وأهمية الأزرار في أي موقع أو مدونة فهي سبيلك الوحيد للتنقل بين الصفحات وتحميل المحتويات وغير ذلك لكن دعني أكلمك كصاحب موقع أو مدونة فأنت ملزم على تضمين الأزرار في صفحاتك بشكل دوري كما أنك تسهر على إختيار الشكل والتنسيق المناسب لكل زر وبما أن الأزرار مختلفة الشكل والحدث فهذا يعني شيئين .. ياإما تلجأ لشكل واحد لجميع الأزرار و هذا يجعله ربما ممل ... ويا إما تجد نفسك غارق في كومة من الأنماط المتعارضة والغير المتناسقة فقط لغرض إعطاء محتواك حيوية ولمسة أنيقة .. فلا تقلق لأن هناك عدة حلول وأهمها وأشهرها مكتبة Bootstrap Button الرسمية لكن العديد لايفضلها لعدة أسباب آخرها أنها تقيدك بالنماذج الاولية من حيث التصميم واختيار الالوان فتجد نفسك تلجأ لتكرار الاكواد.
أهلا أصدقائي...كما وعدناكم سنريكم اليوم المعنى الحقيقي لقالب جاهز للتصميم بمميزات ومعامل إحترافية ولن أماري أو أبالغ إن قلت أن معظم القوالب من هذا النوع هي مجرد قوالب تنظيف لا أكثر فتصميم القوالب صدقني سأكذب عليك إن قلت لك هو أمر سهل فهناك فرق بين (قالب واجهة) مبهر وبين (قالب ويب) تم بنائه بأسس متينة فأغلب القوالب التي تنشر خصوصا في المحتوى العربي هي بنسبة 70% قوالب واجهة معدلة وفقيرة جدا من حيث التنسيق والتكويد والكارثة الكبرى التكرار والسرقة وخباثة السكريبتات . لذلك المطلوب مني ومنك أن نفهم بنية تصميم القوالب وطبعا هذا يحتاج إلى صبر وتأني وتدوين كل ما تكتسبه من خبرة والأهم إحترام المجال والعاملين عليه.
المنشور عبارة عن تركيب صندوق لتضمين شفرة برمجية وكما تعلمون مثل هذه الإضافات ضرورية لعرض الأكواد بالتنسيق الصحيح لها وتجنب الأخطاء بإختلاطها مع النصوص الأخرى كما نعطي للمستخدم فرصة لفهم ومراجعة ما يتم عرضه بغض النظر عن اللمسة الإحترافية التي تضفيها مثل هذه الملحقات على القالب... فنحن ننصح بشدة توفر مثل هذه أداة في قالب مدونتك خصوصا المدونات المعنية بالشروحات البرمجية . مانقدمه بهذا الخصوص أداة قوية وأنيقة والأهم أنها متناسقة خفيفة وذات شكل عصري تم تطويرها ومراجعة مشاكلها ..كما أننا قمنا بوضع ملحق لها يمكنك من توليد الأكواد بسهولة ويسر ستجده عند تحميلك الملف المرفق في القائمة الجانبية.
