كيف تجعل قالب بلوجر متجاوب Responsive .. و لماذا !

من المأكد إن كنت صاحب موقع أن العديد من متابعي موقعك يتصفحون و يقرأنو مقالاتك عبر هوافتفهم أو التابليت , فلو لم تجعل قالبك غير متجاوب (responsive) فأنت بدون أن تشعر منعت زوار موقعك و متابعيه من قرائة تدويناتك و لم تجعلهم يجدون راحتهم في موقعك , لذلك نستنجد بالـقوالب المتجاوبة من أجل جعل القارئ يجد راحته و يحب موقعك ! 

لذلك عليك أن تسرع في جعل موقعك متجاوب responsive لإظهار إحترافية موقعك و كسب قرّائك ..

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

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

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

بعد الدخول إلى تحرير القالب و تعديل html , أبحث عن </head> ضع قبلها مباشرة هذا الكود

1	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

الأن , إن كنت تملك دراية بالcss ستتمكن من العمل , الأن ابحث عن سيكون عملك في المنطة بين 

<b:skin><![CDATA[

و

]]></b:skin>

هذا إن كنت تشتغل على بلوجر , لكن إن كنت لا تشتغل على بلوجر , اسكتب شفرتك في ملف الcss الخاص بك  ,

المهم الأن هنا :

احذف الكود الخاص ب css الخاص بك و يكون عملك هنا 

@media screen and (max-width : 1280px) { /* CSS FOR NETBOOK AND DESKTOP ------------*/}

@media screen and (max-width : 1024px) { /* CSS FOR TABLETS ------------*/}

@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ------------*/}

@media screen and (max-width : 640px) { /* CSS FOR IPHONE ------------*/}

@media screen and (max-width : 480px) {/* CSS FOR MOBILES ------------*/}

@media screen and (max-width : 320px) { /* CSS FOR SMALL OLD MOBILES ------------*/ }

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

 بدل /* CSS FOR NETBOOK AND DESKTOP ------------*/ اكتب الcss الخاص و المتوافق مع الحاسوب و الأجهزو ذات الشاشات الكبيرة .

بدل /* CSS FOR TABLETS ------------*/ اكتب كود css الخاص بالتابليت 

بدل /* CSS FOR SMALL TABLETS ------------*/ اكتب كود css الخاص بالتابليت الصغيرة

بدل /* CSS FOR IPHONE ------------*/ اكتب كود css الخاص بالأيفون Iphone

بدل  /* CSS FOR MOBILES ------------*/ اكتب كود css الخاص بالهواتف

بدل  /* CSS FOR SMALL OLD MOBILES ------------*/   اكتب كود css الخاص بالهواتف ذات الشاشات الصغيرة

لم تفهم جيدا ؟؟ إليك مثال تطبيقي :

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

لدي ال css الخاص بي :

.logo{

width:300px;

}

.header{

width:1000px;

}

سنحاول جعله متوافقا مع جميع الأجهزة كما نريد

@media screen and (max-width : 1280px) { .logo{width:300px;} .header{width:1000px;}}
@media screen and (max-width : 1024px) {  .logo{width:250px;} .header{width:800px;}}
@media screen and (max-width : 768px) { .logo{width:200px;} .header{width:600px;}}

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

@media screen and (max-width : 640px) {  .logo{width:150px;} .header{width:450px;}}
@media screen and (max-width : 480px) { .logo{width:250px;} .header{width:300px;}}
@media screen and (max-width : 320px) {  .logo{width:200px;} .header{width:250px;}}

وسيظهر بأشكال نريدها نحن في كل جهاز , 

فذا درس مكتوب لجعل قالب بلوجر متجاوب , لكن ستكون قريبا دروس مصورة بالفيديو

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