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

Post Top Ad

أعلن هنا

Post Top Ad

الاثنين، 18 أغسطس 2014

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

إعلانك هنا

من المأكد إن كنت صاحب موقع أن العديد من متابعي موقعك يتصفحون و يقرأنو مقالاتك عبر هوافتفهم أو التابليت , فلو لم تجعل قالبك غير متجاوب (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;}}


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


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

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

إرسال تعليق

Post Top Ad

إجمالي مرات مشاهدة الصفحة

  • 5765

    Posts
  • 3

    Comments
  • 368749

    Pageviews

تواصل معنا

أكثر من 600,000+ يتابعون موقعنا عبر وسائل التواصل الإجتماعي إنظم إلينا الآن

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

عن الموقع

Sans+titre+copy«إمو التعليمية» هي مدونة إلكترونية متخصصة في مجال الأسرة والمجتمع والتكنولوجيا الإلكترونية الهدف من هذا القانون هو نشر الثقافة التقنية للجميع من خلال سلسلة من المقالات والدورات التعليمية المجانية ، اعتقادا منها أنه يجب نشر العلم ، وليس بيعه ، لجذب انتباه المعلمين العرب وتحفيزهم على التدوين في الميدان من تقنيات التعليم لنشر أفكارهم وخبراتهم. تقوم المدونة بترجمة أهم المقالات والأخبار على المواقع الأجنبية
معرفة المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *