الاثنين، 17 أغسطس 2015

إضافة سلايد شو تلقائي لمدونات بلوجر

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

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

معاينة :

إضافة سلايد شو تلقائي لمدونات بلوجر

طريقة تركيب السلايد شو : 

1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .
2- توجه إلى لوحة التحكم خاصتك على بلوجر 
3- توجه نحو تعديل القالب 

إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)



فوقه مباشرة (قبله) , أضف الكود التالي :



ابحث من جديد , عن :



قبله مباشرة أضف الكود التالي :
(غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو)



إبحث الأن عن :



فوقه مباشرة أضف هذا الكود :



أخر خطوة : إبحث عن :



(ربما لا تجده , يمكنك وضع رابط مدونتك في تعليق و مشكلتك و سيتم الرد عليك)
(ضع تعليقا ضمن تعاليق بلوجر و ليس تعليقات الفيسبوك حتى يصلني إشعار بذلك و أجيب عليك في أقرب وقت)
بعده / أسفله مباشرة , أضف هذا الكود



قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)

الجمعة، 7 أغسطس 2015

إعلان عن سلسلة : لقاء مع لغة برمجة !

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


إعلان عن سلسلة : لقاء مع لغة برمجة !

سلسة "لقاء مع لغة برمجة" هي ببساطة مجموعة من المقالات التي نتطرق من خلالها كل مرة على لغة برمجة معينة , نحدد تاريخها ,  إستعمالاتها و كيفية تعلمها .
مع كل لغة برمجة نتحدث عنها ستكون في نهاية المقالة مصادر رائعة لتعلمها  بأكثر من لغة , و أكثر من شكل (شروحات مصورة , كتب ..).
إن كانت هناك مجموعة من اللغات التي تود تعلمها و اكتشافها , ليس عليك إلا ترك تعليق بإسم اللغة فقط .

أمل أن تكون الفكرة نالت إعجابكم , و تساعد المبرمجين العرب على الدخول أكثر في هذا العالم الرائع .

يمكنك تحفيزي عبر مشاركة التدوينة مع أصدقائقك عبر مواقع التواصل الإجتماعي أو ترك تعليق مشجع ^_^ ! شكرا !

الأحد، 2 أغسطس 2015

المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول

تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها .
و بما أننا أحيانا مطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعلين من المحددات : "class." للكلاس , "id#" للـ ID !
هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها .

المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول


سنتعرف معا عن ماهيّة المحددات .
أنواع ال selectors , و طريقة إستعمالهم !

ماهي المحددات selectors ؟

المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة .
تختلف أنواع المحددات و تتعدد , لذا سنتعرض معا لمجموعة من المجددات مع تفسيرها و أمثلة لها .

1- محدد * :

غني عن التعريف , يستعمله غالبية مصممي المواقع , حيث يقوم بتحديد كل العناصر الموجودة في الصفحة و إضافة بعض التأثيرات أو التغييرات فيه .

مثال :

*{
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}


في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..

2- محدد + :

ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت :
div + p
 فكأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة .
مهم جدا : 
هذا لا يعني أن p موجود داخل العنصر div , لا  !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !


مثال :


div + p{
background:red;
}


في هذا الكود قمنا بإختيار العنصر p الذي يأتي مباشرة بعد العنصر div , و أضفنا له خلفية حمراء .

2- محدد < :

يشبه إلى خد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهمى كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .

div > p{
background:red;
}

هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .

3 - ["a[href="link

هنا كأنك طلبت كل عنصر a ذو  attribut href بالرابط link .
و إضافة بعض التعديلات عليه .

مثال :

a[href="http://modawin-blogger.blogspot.com"]{
background:red;
}


هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا .

تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^


الخميس، 30 يوليو 2015

عمل بنر إعلاني متحرك/ثابت إحترافي لموقعك أو مدونتك في دقائق و مجانا (لا تحتاج خبرة !)

هل تود الحصول على بنر إعلاني إحترافي متحرك أو ثابت حسب رغبتك دون دقع سنت واحد , أو أي خبرة في التصميم ؟
يمكنك من الأن البدأ في تصميم البنرات الإعلانية لمواقعك و مدوناتك , أو تقديم خدمات في هذا المجال في مواقع الخدمات المصغرة و البدأ في تحقيق مدخول من الأنترنت .

عمل بنر إعلاني متحرك/ثابت إحترافي لموقعك أو مدونتك في دقائق و مجانا (لا تحتاج خبرة !)


عبر المواقع المذكورة أسفله , إدخر جهدك , أموالك و وقتك و احصل على بنراتك إعلانية بتصميم و ذوق مميزين و بالأحجام التي تريدها .

يمكنك من خلاله إختيار الأحجام و القياسات التي تودها للبنر , مع إمكانية تعديل النص و الخلفية و الإطار و غيرها من المميزات التي أتركك لتكتشفها بنفسك .
و من ثم يمكنك تحميل البنر أو أخذ الرابط المباشر له لإستخدامه.
(يتوفر على قسم قوالب للبنرات لم يتم إطلاقه بعد إلى تاريخ كتابة التدوينة)

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

لا يقل روعة من المواقع المذكورة سابقا , فقط عليك إنشاء حساب جديد بالموقع للتمكن من الإستفادة منه (يمكنك ربطه بحسابك على الفيسبوك أو جيميل ) .

إن كانت الإعلانات الثابثة لا تمثل حلا ناجحا لك , يمكنك الإلتجاء إلى البنرات الإعلاناية المتحركة عبر هذا الموقع الرائع .
يتوفر في الموقع أكثر من مثال عن البنرات و بتأثيرات جميلة و خفيفة .

و يكون بذلك حصلت على banner رائع , مجانا , و دون خبرة ! مبروك !!

في الختام , أدعوك أخي الكريم إلى نشر المقالة على حساباتك على مواقع التواصل الإجتماعي , فتعليقك المشجع و مساعدتك البسيطة تعني لي الكثير ! :)

الأربعاء، 29 يوليو 2015

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)

بالنسبة لمستخدم عادي , أو شخص غير مهتم بالتصميم و أنواعه , فلا يوجد فرق بين التصميم المادي (material design) و الذي سنتعرف عليه في هذه التدوينة و سنكتشف مميزاته و بين التصميم المسطح  "الفلات" (flat design) و الذي تم التطرق إليه في تدوينة سابقة .
يستحق الذكر أن كلا الطرفين يميلان إلى البساطة و الخفة .
حيث أن نقاط الإختلاف بينها طفيفة جدا لدرجة أنه يصعب للبعض التفريق بينهما .

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)


لكن هل تسائلت لم أغلب التطبيقات اليوم و بعض المواقع (أمثلة : تطبيقات :يوتيوب , جيميل , دراف , كروم.. وغيرها من تطبيقات جوجل)  تستخدم التصميم المادي ؟

دعنا نتعرف أولا على Material design ..

فماهو التصميم المادي ؟

هي مجموعة من القواعد في التصميم تم تقديمها من طرف جوجل تنفّذ على واجهة المستخدم الرسومة و التي يعبر عنها بـ "GUI"
(Graphical User Interface) للبرامج و التطبيقات .
و قد قدمت شركة "جوجل" هذا النمط من التصاميم خلال مؤتمر Google I/O في 25 يونيو (جوان) 2014 .

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)

الفرق بين التصميم المسطح و التصميم المادي ؟ (Flat & Material) ؟

من خلال إستجوابات للبعض من كبار المصممين , يمكن أن نجد أن الفرق يكمن في :
1- التصميم المسطح مجرد تماما من البعد الثالث في حين أن التصميم المادي يأخذ هذا البعد بعين الإعتبار .
2- إختلافات بسيطة في حدة الألوان .
3- التصميم المادي عبارة عن تطوير للتصميم المسطح عبر ادراج بعض التفاصيل فيه .
4- التصاميم المادية تقلد الواقع أكثر من التصميم المسطح .

و هنا بعض الصور التي يمكن أن تقربك أكثر من الـ material design

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)


تعليقك المشجع و مشاركتك التدوينة على مواقع التواصل الإجتماعي تدفعني للعمل أكثر فأكثر :) شكرا

الثلاثاء، 28 يوليو 2015

ماهو البوتستراب؟ و لماذا عليك إستخدامه كمصمم و مطور مواقع؟ كيف أتعلمه؟

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

أنت في المكان الصحيح ..

ماهو البوتستراب ؟ و لماذا عليك إستخدامه كمصمم و مطور مواقع ؟ كيف أتعلمه؟


البوتستراب أو "bootstrap" أصبح حتما أشهر إطارات العمل للواجهات الأمامية في الويب "frontend framework" منذ إطلاقه سنة 2011 من قبل تويتر .
و بفضل التطورات و التحسينات التي شهدها , أثبت البوتستراب أن أي مصمم مواقع , يمكنه إنشاء موقعه التجاوبي  بتصميم جذاب حتى لو كان لا يجيد إلا القليل من الـ html و الـ css .
بإستعمالك إطار bootstrap , ستوفر وقتك و جهدك و تضمن نتيجة فعالة .
و من بين الأسباب التي تجعلك تتعلم البوتستراب و تستعمله في مشاريعك :

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

- التوافق مع المتصفحات
البوتستراب متوافق ليس فقط مع المتصفحات الحديثة , بل أيضا يشكل حلا لمستخدمي "interner explorer 8" .
تابع إرشادات البوتستراب و تقيد بها ليكون موقعك متوافقا مع كل المتصفحات .

- مفتوح المصدر
بوتستراب مشروع مفتوح المصدر Open Source .. تم إصدارها تحت رخصة أم أي تي "MIT" .و هو مستضاف على github .

و هذه أسباب تجعل من البوتستراب أداة قد لا يمكن الإستغناء عنها عند عدد هام من مصممي المواقع .

دروس و دورات تعلم بوتستراب bootstrap

الأن أنت تتسائل كيف تتعلم البوتستراب ؟
ممتاز ..

1- هنا دورة بالفيديو , صوتا و صورة من موقع advphp , يتطرق إلى أهم الدروس التي قد تحتاج اليها في تصميم موقع متجاوب و مميز
من هنا 

2- إن كنت من أصحاب الصبيب الضعيف من الانترنت و تحميل الفيديو يأخذ الكثير من وقتك , فلم أنساك أيضا ! :)
دورة كاملة مكتوبة بالانجليزية عن ال bootstrap من موقع w3schools الغني عن التعريف .
من هنا 

3- تريد ان تكون الدورة بالعربية و الدروس الانجليزية تربكك و لا تجعلك تتعلم بسهولة ؟
لا يوجد إشكال , كتاب يشرح مواضيعا ستحتاجها في موقعك باللغة العربية .
من هنا

الموضوع متعوب عليه , تعليقك المشجع و مشاركة التدوينة مع أصدقائك على مواقع التواصل الإجتماعي تحفزني نحو النشر أكثر و الإفادة :)


الاثنين، 27 يوليو 2015

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر

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

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر


من المميزات الرائعة و التي لا يمكنني المرور دون ذكرها , أنّ  :
- صاحب الموقع (صاحب الشات) بإمكانه حظر أي شخص في الشات إذا صدرت منه رسائل سبام أو أي رسائل مزعجة أخرى .
- الحوار مع زوار الموقع فوري و لا يتطلب تحديث الصفحة
- هناك أكثر من تصميم و شكل للإضافة و يمكنك إختيار الألوان التي تريدها و تعديلها متى شئت 
- إظهار عدد المتواجدين في الشات 

إنشاء صندوق دردشة لمدونتك : 

أولا توجه نحو موقع chatango .
ستظهر لك 3 أمثلة لصناديق الشات : Box / Ticker / Tab .
اختر الشكل الذي تفضل ظهوره في مدونتك عبر الضغط عليه .
لتدخل إلى إعدادات الصندوق و هذه صورة تفسر لك كلّ التعديلات التي يمكنك أن تقوم بها :

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر
و من ثم اضغط على Create Group في الأعلى .
ليقوم مباشرة بتوليد كود الإضافة .

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر


قم بنسخ هذا الكود لأنك ستستحقه .


الدخول للوحة التحكم في بلوجر
الدخول إلى التخطيط و إختيار إضافة HTML/JAVASCRIPT
إضافة الكود الذي قمت بنسخه
حفظ

مبروك !! الأن أن تشاهد صندوق الدردشة في مدونتك  ^_^ .
تعليقك البسيط و مشاركتك للتدونية على مواقع التواصل الإجتماعي تحفزني للنشر و الإفادة ! :)

الأربعاء، 15 يوليو 2015

إضافة عدد مشاهدات الموضوع لمدونات بلوجر

إضافة عدد مشاهدات الموضوع تعتبر من بين الإضافات المميزة للمدونات على منصة بلوجر , و كون بلوجر لا يوفر هذه الإضافة عكس الووردبريس , فإن علينا الإلتجاء إلى الإضافات و الطرق "الملتوية" عبر الإلتجاء إلى بعض الخدمات المجانية التي تمثل حلا ناجحا , مثل خدمة Firebase التي توفر لك قاعدة بيانات تتسجل فيها عدد مشاهدات الموضوع تصل حتى 5GB !

إضافة عدد مشاهدات الموضوع لمدونات بلوجر


أخي الكريم , فقط ركز معي و تابع الشرح بالصور :

1- توجه إلى لوجة تحكمك على بلوجر
2- توجه نحو القالب للتعديل عليه , و من ثم قم بأخذ نسخة إحتياطية للقالب (backup) حتى تتفادى أي مشكلة قد تواجهك .
3- تأكد أنك تستخدم مكتبة جيكويري (إبحث عن كلمة JQuery للبحث عن رابط إدراج الجيكويري , لو وجدته ممتاز , لو لم تجده أضف الكود أسفله مباشرة فوق 
)


4- توجه نحو موقع firebase و أنشئ حسابك عبر هذا الرابط .
5- أنشئ قاعدة بيانات في حسابك على الموقع بالإسم الذي تريده
مثل ماهو موضح بالصورة :


إضافة عدد مشاهدات الموضوع لمدونات بلوجر

سجل الرابط الذي يظهر لك تحت APP URL , لأنك ستجتاجه فيما بعد .
مثل : https://modawin-blogger.firebaseIO.com

6- توجه إلى قالبك , و ابحث عن : 
]]>
 فوقه مباشرة أضف هذا الكود :

7- الأن إبحث عن :


فوقه مباشرة , أضف هذا الكود :

مغيرا https://modawin-blogger.firebaseIO.com بالرابط التطبيق الذي أنشأته .

8- أخر مرحلة , إبحث عن المكان الذي تريد أن تدرج فيه الإضافة بعد إقرأ المزيد أو في تحت العنوان ..الخ ,
يمكنك أن تبحث عن  
ستجدها أكثر من مرة , ستحتاج الثانية أو الثالثة حسب قالبك .

فوقه مباشرة , ألصق هذا الكود :



ثم إضغط حفظ .. ربما تركيب الإضافة معقد قليلا , لذلك أي مشكلة تواجهك أترك تعليقك و سيتم الرد عليه .

تعليقك المحفز و مشاركتك التدوينة مع أصدقائك يعني لي الكثير ! :)

الأحد، 12 يوليو 2015

5 قنوات عربية و أجنبية على اليوتيوب عليك متابعتها إن كنت تريد إحتراف الأفتر إفكت !

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


5 قنوات عربية و أجنبية على اليوتيوب عليك متابعتها إن كنت تريد إحتراف الأفتر إفكت !



ماهي إستعمالات أفتر إفكت ؟

يستخدم البرنامج في الفيديو الرقمي , المؤثرات في الأفلام و بعض الأعمال التلفزية مثل الإعلانات و مقدمات البرامج و الموشن جرافيك .

كيف يمكنني أني أستفيد من برنامج أفتر إفكت ؟

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

لماذا أفتر إفكت ؟  

- سهل الإستعمال و التعلم بفضل واجهته البسيطة و كثرة الدروس التي تشرح إستخدامه على الإنترنت ..
- يخول لك التحكم في العمل 2D أو 3D .
- إمكانية التعامل  و التكامل مع منتجات أدوبي الأخرى مثل الفوتوشوب , بريميير برو , فلاش .. 
- يمكنك أن تستعمل البرنامج إن كنت من مستخدمي الويندوز أو الماك .
- فضلا عن ال plugins و ال presets و غيرها من الأدوات التي تسهل لك عملك .

كيف يمكنني تحميل after effects :

يمكنك تحميل أفتر إفكت من خلال الموقع الرسمي لأدوبي من صفحة : تحميل After effects
و من ثم تحميل النسخة التجربية من البرنامج , أو عبر شراءه .. أو عبر البحث عنه من جوجل على أساس تحميله نسخة كاملة .

كيف أتعلم أفتر إفكت ؟

و هو أهم جزء في التدوينة ..
أخي الكريم , هذه من بين أفضل القنوات التي أتابعها و التي أضمن لك من خلالها الوصول إلى الإحترف , فقط شاهد الشروحات و طبقها ..

1- أولا تعلم الأساسيات , فحجر الأساس هو مايجعلك تطور من مستواك و تتعلم بسرعة .
دورة أساسيات الأفتر افكت من expressionalex 
دورة بالعربية , مشروحة بشكل سلس , شاهد الفيديوهات كما هي مرتبة و بإذن الله سنكون قد بنينا حجر الأساس .
تعلمت الأساسيات ؟ 
ممتاز ! الأن يمكنك المرور إلى المرحلة المقبلة : التطوير ^^
الأن هذه القنوات الأجنبية الرائعة يمكنك أن تستفيد منها لتصبح محترفا في هذا المجال !


قناة مختصة في الموشن جرافيك , يمكنك متابعتها إن كنت من أصحاب المستويات المتقدمة ;)

الموضوع متعوب عليه , تعليقك السبيطة و مشاركتك مع أصدقائك تعني لي الكثير ! :) شكرا ^^

الأربعاء، 8 يوليو 2015

منع سرقة و نسخ المواضيع من مدونتك على بلوجر

مرحبا بك أخي الكريم ..
هل مللت من سرقة تدويناتك التي تضع فيها جهدك و وقتك قبل أن يمر صاحب أي مدونة أخرى لينسخها و ينشرها في مدونته , بل و يزعم أنه من كتبها حتى ؟
بتطبيقك لهذا الدرس , ستساهم بطريقة غير مباشرة أيضا في الإرتقاء بالمحتوى العربي و وضع حد لكل من لا يعتمد إلا النسخ و اللصق في مدوناته .

منع سرقة و نسخ المواضيع من مدونتك على بلوجر


دعنا ندخل في صلب الموضوع , الإضافة التي ستقوم بإستعمالها في مدونتك بلوجر , لا تمنع نسخ النصوص فقط , بل أيضا الصور !
مراحل تركيب الإضافة : 

1- الدخول إلى لوحة تحكمك في بلوجر  
2- إختر المدونة التي تود تطبيق الشرح فيها
منع سرقة و نسخ المواضيع من مدونتك على بلوجر

3- التعديل على القالب
منع سرقة و نسخ المواضيع من مدونتك على بلوجر

4- Ctrl + F و كتابة وسم :

منع سرقة و نسخ المواضيع من مدونتك على بلوجر






فوقه مباشرة , قم بلصق الكود أسفله :



5- حفظ

لتكون بذلك منعت كل من يحاول سرقة جهدك ! :)
 مشاركتك البسيطة و تعليقك المشجع يدعمنا لمواصلة النشر و الإفادة ! ^_^

 (أزرار المشاركة أسفل التدوينة ::) )

الخميس، 4 يونيو 2015

تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل

ضمن التحديثات المستمرة التي يقوم بها الفيسبوك , أعلم الأخير من خلال قسم المطورين الخاص به , أن صندوق الإعجابات للصفحات لن يتم إعتماده مستقبلا بداية من 23 يونيو (جوان) و هذه الإضافة لن تعمل إلا بتغييرها بالكود الجديد ..

تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل


و على أساس إيجاد بديل لهذه الإضافة التي تستخدم في الملايين من المواقع , طرح الفيسبوك إضافة جديدة تسمى بـ Page Plugin .
بنفس خصائص الإضافة السابقة , لكن بتصميم جديد .
و نظرا لأهمية هذه الإضافة , التي تقرب المتابعين من المدونة و حساباتها على الشبكات الإجتماعية , سنتعرض لشرح الإستفادة منها في مواقعنا .
كل ما عليك فعله هو البحث في هذا الكود عن : https://www.facebook.com/modawin.blogger
و تغيره برابط صفحتك على الفيسبوك




لتقوم بتركبه كأي إضافة أخرى عبر : 
الدخول للوجة التحكم في بلوجر



تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل



إضافة أدات html/javascript
تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل
لصق الكود
تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل

حفظ 


هنا أقدم لك بعض التعديلات التي بإمكانك إجارءها إن كنت تملك خبرة ولو قليلة بالتعامل مع الشفرات البرمجية .
data-show-posts="false"
عند تغيير false بـ true , ستظهر الإضافة المنشورات في الصفحة تحت صندوق الإعجابات.

data-hide-cover="false"
عند تغيير false بـ true , سيتختفي غلاف الصفحة من الإضافة

data-height="250"
لتحديد طول الإضافة

data-width="300"
لتحديد عرض الإضافة 

شاركنا بتعليقك و مشاركة المقالة مع أصدقائك ! :) (أز)

السبت، 9 مايو 2015

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !

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

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !


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

طريقة التعديل :



بإمكانك تغيير شكل السهم و اختيار أحد النماذج التالية عبر البحث عن :

و تغييره برابط أحد الصور التالية .
(إضغط على الصورة و ستجد الرابط المباشر لها )



إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !
نموجذ 1

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !
نموذج 2

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !
نموذج 3

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !
نموذج 4

ممتاز , الأن لم يتبقى إلا التركيب :

طريقة التركيب :

قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة html / javascript

و أخيرا قم بلصق الكود هناك و تمتع بالإضافة في موقعك !

لا تنس أن تشاركنا بتعليقك و تشجيعك :)
أي إستفسار او مشكلة , لا تتردد في طرحه هنا أو في صفحة الفيسبوك :)

(أزرار مشاركة المقالة أسفل التدوينة)

السبت، 25 أبريل 2015

للمصممين : 3 مواقع للحصول على ألوان فلات

لعل أبرز ما يفكر فيه المصممون و مطورو المواقع في أعمالهم إنتقاء و إختيار ألوان لأعمالهم لم له من أهمية كبرى على نتيجة العمل .
و بما أن التصميم المسطح flat design من أبرز الأساليب المعتمدة في التصميم و يسيطر على أعمال المصممين لجماله و بساطته 
(لا تعرف ماهو التصميم المسطح ؟ :) تعرف عليه من هنا : التصميم المسطح : البساطة بطعم الإبداع ).
فإن المصمم عليه أن يكون دقيقا في تحديد ألوانه .

للمصممين : 3 مواقع للحصول على ألوان فلات


و لتسهيل مأموريته , وجدت مواقع على الأنترنت توفر لك ألوانا مسطحة و تزودك بكود اللون .
(hex color / rgb color)

وهذه قائمة بأفضل المواقع التي ستستفيد منها :

1 - flatcolors


للمصممين : 3 مواقع للحصول على ألوان فلات


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



2- flatuicolors


لا يقل روعة عن الموقع الأول .
للمصممين : 3 مواقع للحصول على ألوان فلات



إختر اللون المراد إستعماله , إضغط عليه , و سيتم نسخ الكود بطريقة تلقائية .
إضغط على CHOOSE FORMAT لمزيد من الخيارات .



3- flatuicolorpicker


للمصممين : 3 مواقع للحصول على ألوان فلات

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


أم الأن فلم يتبق لك إلا أن تنسق ألوانك , إليك هذه المقالة , ستفيدك حتما ! :)

الخميس، 23 أبريل 2015

جوجل : تجاوب موقعك مع الموبايل يؤثر على ترتيب موقعك !

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

جوجل : تجاوب موقعك مع الموبايل يؤثر على ترتيب موقعك !


و أكدت جوجل في البيان الذي نشرته , أن هذا التحديث سيؤثر كثيرا على نتائج البحث لدى مستعملي الهواتف .

كيف أعرف أن موقعي متجاوب ؟

جوجل فكرت فيك بأداتها البسيطة و الرائعة mobile-friendly .
واجهة الأداة سهلة حيث بمجرد الدخول , املأ الفراغ برابط الموقع الذي تود فحصه .
و من ثم الضغط على "تحليل" أو "analyser" .
كما هو موضح بالصورة :
جوجل : تجاوب موقعك مع الموبايل يؤثر على ترتيب موقعك !

و بعد بضعة ثواني سينتهي الفحص و تظهر لك النتيجة .
هذه نتيجة فحص مدونة مدون بلوجر :


جوجل : تجاوب موقعك مع الموبايل يؤثر على ترتيب موقعك !


النتيجة تؤكد أن الموقع متجاوب مع الهواتف النقالة , إذن هو mobile-friendly !
جرب فحص موقعك الأن !

هل لك وجدت نفس النتائج ؟
إن كان جوابك نعم : مبروك , و ستلاحظ تحنا في ترتيب موقعك في جوجل
إن كان لا : فإليك بهذه التدوينة : كيف تجعل قالب بلوجر متجاوب Responsive .. و لماذا !

إن إستفدت من المقالة , لم لا تشاركها مع أصدقائك ؟ أزرار المشاركة أسفل التدوينة . ^^

الاثنين، 20 أبريل 2015

سيو 2015 : توقف عن الترويج لموقعك بتلك الطرق !

هل أنك أول شخص تفكر في التحايل على جوجل (محركات البحث بصفحة عامة) ؟
طبعا لا , كثيرون هم من حاولوا خداع خوارزمياته بشتى الطرق التي ستتعرف عليها بعد قليل .

سيو 2015 : توقف عن الترويج لموقعك بتلك الطرق !


حتى لو نجحت هذه  الطرق "الفاشلة" لفترة قصيرة فإنك ستقع بلا شك في فخ جوجل , مما قد يؤدي إلى حظر موقعك من الظهور في نتائج البحث !
و حتى أحدث الإستراتيجيات و أكثرها خبثا في السيو , نجحت محركات البحث في كشفها و التعامل معها .

هذه الأخطاء يمارسها عدد كبير من أصحاب المواقع ضنّا منهم أنهم بعيدون عن نظر محركات البحث و لن يتم كشفهم :

1- حشو الكلمات المفتاحية :


أكبر خطأ على الإطلاق يقوم به أصحاب المدونات إلى يومنا هذا !

سيو 2015 : توقف عن الترويج لموقعك بتلك الطرق !


عزيزي القارئ , هل تظن بهذه الإستراتيجية ستخدع محركات البحث ؟!

سيو 2015 : توقف عن الترويج لموقعك بتلك الطرق !


نصيحتي لك هي أن تترك هذه الممارسات و تسعى إلى الكتابة للقراء لا لمحركات البحث .
فهذه الطريقة لن تجدي معك نفعا , بل ستلاحظ تراجعا في ترتيب موقعك في محركات البحث .
نصائح أخرى :



2- النصوص المخفية :


ذكاء المتحايلين لم يصل لتلك الدرجة فحسب , بل عملوا أيضا على إغراق الصفحة و إشباعها بكلمات مفتاحية غير ظاهرة .
كيف ؟
سيو 2015 : توقف عن الترويج لموقعك بتلك الطرق !

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

العقوبة : عدم الظهور في محركات البحث !



3- خياطة المحتوى :


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


أخيرا , أخي العزيز أطلب منك عدم اتباع هذه السياسات عديمة الفائدة , فمهمى تذكّيت على جوجل ستقع في فخهم .
تابع دورة سيو على : مدون بلوجر

يسعدني لو تشارك التدوينة مع أصدقائك على موقاع التواصل الإجتماعي .
أزرار المشاركة تحت التدوينة ^_^

السبت، 4 أبريل 2015

إدارة الوقت .. أنجز أكثر في وقت أقل !

الوقت كالسيف إن لم تقطعه قطعك !

هل فكرت يوما عن وقتك الضائع يوميا ؟
هل أن ساعات اليوم للناجحين في حياتهم أكثر من 24 ساعة ؟
طبعا لا !
بل إن إدارة الوقت له فنونه التي لا يتقنها الجميع !!
بعد قراءة هذه النصائح و التوجيهات و تطبيقها , ستتستفيد من وقتك بأقصى حد , و ستكون قادرا على إنجاز مهامك بحرفية .
فالإنجاز الأجلّ .. في الوقت الأقل .

إدارة الوقت .. أنجز أكثر في وقت أقل


حدد أهدافك و اكتبها أمامك :

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

قسّم الأعمال الكبرى إلى أقسام أصغر :

بعض الأهداف حتى بتدوينها في قائمة الأعمال , تبقى القدرة على ادارتها صعبة حيث أنها هي الأخرى تضم أعمالا ضمنية .
مثال :
أنت مبرمج , لديك فترة معينة عليك أن تبرمج فيها موقعا أو برنامجا .
عليك أن تقسم العمل إلى أقسام , كأن تقول : "اليوم سأصمم الهيدر , غدا سأبرمج لوحة التحكم " .. الخ

رتب أعمالك وفق الأولوية :

إجعل العمل الأهم و ذو الأولوية أول أهدافك  .
لذا ابدأ بالمقارنة بالعمل العاجل و العمل الذي يمكنك أن تأجله

أدرس أوقات فراغك :

عليك أن تقوم بالبحث عن الأوقات التي تفضلها و تركز فيها أكثر .
و تسعى إلى أن تستغلها و لا تضيعها .

تجنب إستعمال الشكبات الإجتماعية :

الشبكات الإجتماعية كالفيسبوك , تويتر و غيرها كالمغناطيس , تجذبك و تجعملك تمضي وقتك كاملا فيها بين الدردشة مع أصدقائك و متابعة أخر الأخبار و التفاهات !

لا تأجل عمل اليوم إلى الغد :

عليك أن تسارع في القيام بالأعمال و ألا تأجل الأعمال , فذلك سيسبب لك ضغطا في وقتك .

ضع وقتا لنهاية العمل :

عليك أن تجعل إلى جانب جدول قائمة الأعمال بداية و نهاية كل ما عليك إنجازه , و إلا باء كل ما خططت له بالفشل .

إستفد من تطبيقات إدارة الوقت :

مع التطور الرقمي الذي نعيشه , غزت التكنولوجيا حياتنا اليومية و صار بالإمكان أن نستفيد منها .
تطبيقات إدارة الوقت المتوفرة في كل متاجر الهواتف فقط حمّل التطبيق و تمتع بمميزاته .
قائمة بأفضل التطبيقات لإدارة الوقت :

- تطبيق RescueTime
- تطبيق Teux Deux
- تطبيق Toggl

إن استفدت من التدوينة ولو بالقليل , فلا تبخل عن مشاركة التدوينة مع أصدقائك على مواقع التواصل الاجتماعي
 (أزرار المشاركة تحت التدوينة ^^ )