من المأكد إن كنت صاحب موقع أن العديد من متابعي موقعك يتصفحون و يقرأنو مقالاتك عبر هوافتفهم أو التابليت , فلو لم تجعل قالبك غير متجاوب (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 : 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;}}
وسيظهر بأشكال نريدها نحن في كل جهاز ,
فذا درس مكتوب لجعل قالب بلوجر متجاوب , لكن ستكون قريبا دروس مصورة بالفيديو
لذا لا تبخلوا علينا بنشر التدوينة مع أصدقائكم لتعم الفائدة و تشجعني على العمل أكثر فأكثر ..
ليست هناك تعليقات:
إرسال تعليق