جوجل بلس

تابعنا على الفيسبوك

ترتيب ألكسا

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



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

تصميم قالب بلوجر متجاوب


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

بعد الدخول إلى تحرير القالب و تعديل 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 الخاص بالهواتف ذات الشاشات الصغيرة


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


لدي ال 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;}}
@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;}}


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


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

هناك 6 تعليقات:

  1. اقسم بالله ياأيهاب بقالي اكتر من شهر ومش عارف احل المشكله دي وربنا عترني بمدونتك رجاء تساعدني

    ردحذف
    الردود
    1. تفضل أخي الكريم , كيف يمكنني أن أساعدك ؟ :)

      حذف
  2. ورابط مدونتيwww.hasanamen.blogspot.com

    ردحذف
  3. شكرا لك
    www.de-ps.blogspot.com

    ردحذف

حول المدونة

مدون بلوجر مدونة عربية تقنية هدفها الأول إغناء المحتوى العربي و إيصال المعلومة و نشرها بين العرب
لتصبح مدون محترف في بلوجر في مقالات و فيديوهات مصورة
تم تأسيسها سنة 2014 من إيهاب المالكي لتهتم بكل ما يمكن أن يحتاجه المدونون , المبرمجون و المصممون . .
دروس بلوجر , قوالب بلوجر , إضافات بلوجر .. و المزيد على مدون بلوجر ! ^^
تصميم : إيهاب المالكي جميع الحقوق محفوظة مدون بلوجر - إتصل بنا - إتفاقية الإستخدام - سياسة الخصوصية