الدرس 49: طريقة جعل قالب بلوجر متجاوب و متوافق مع شاشات الهواتف و الاجهزة اللوحية الذكية


شرح كيفية برمجة و جعل قالب مدونة بلوجر متجاوب Responsive design Blogger و متوافق مع جميع شاشات الاجهزة الذكية المحمولة  SMARTPHONES مثل الهواتف SMALL MOBILES و اجهزة اللوحية TABLETS

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

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

يمكن عبر اداة mobile friendly انت تعرف ان كان قالبك متجاوب مع شاشات المتعددة

1- اظهار الاضافات و اخفائها على شاشة المحمول المتجاوب للقالب الافترضي لمدونة بلوجر

طبعا هناك من يستعمل النسخة الافتراضية الخاصة ببلوجر للاجهزة المحمولة لكنها غير فعالة لاظهار الشكل و التصميم الحقيقي لمدونتك بل تصميم قالب بسيط الخاص ببلوجر
لذلك ان كنت تستعمل تلك النسخة اليك بعض الطرق لاظهار و اخفاء الاضافات الخاصة بمدونتك.
- الاضافات الافتراضية لمدونة بلوجر فى الاغلب تكون هكذا :   Header - Blog - Profile - PageList - AdSense - Attribution
- ان اردت التحكم فى ظهور هذه الاضافات على شاشات الاجهزة المحمولة يجب عليك  اضافة هذه الاكواد على كل اضافة widgets تريد التعديل عليها من القالب.
مثال : على اضافة ارشيف المدونة BlogArchive سيكون widget الخاص به هكذا :
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
الان تابع معي :
-  ان اردت الاضافة تظهر فى شاشة الحاسوب و شاشة الاجهزة المحمولة اضف الكود 'mobile='yes  هكذا :
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>
-  ان اردت الاضافة تظهر فى شاشة الحاسوب و لا تظهر على شاشة الاجهزة المحمولة اضف الكود 'mobile='no  هكذا :
<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>
-  ان اردت الاضافة لا تظهر فى شاشة الحاسوب وتظهر على شاشة الاجهزة المحمولة اضف الكود 'mobile='only هكذا :
<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>


- يمكن عبر موقع responsinator ان ترى نتيجة عبر اظهار موقعك فى جميع شاشات متعددة خاصة بالهواتف الذكية و اللوحية

2 - كيفية برمجة قالب بلوجر عبر اكواد CSS ليصبح متجاوب مع كل شاشات الاجهزة الذكية المحمولة و اللوحية

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

1- يجب اضافة هذا الكود الى مدونتك تحت الوسم <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

2 - المرحلة الثانية و هي التعديل على مقاسات مدونتك لتكون متجاوبة مع شاشات الاجهزة المحمولة يجب عليك اولا اخد فكرة عن العناصر الاساسية التى يجب  اولا التعديل عليها و هي :
- body : وهو جسم أو بدن القالب الرئيسي.
- outer wrapper : وهو الغلاف الخارجي وداخله توجد كل العناصر.
- header : وهو الجزء العلوي من القالب.
- main wrapper : وهو الجزء المجمع للعناصر الرئيسية في الصفحات.
- post : وهو مكان المواضيع.
- sidebar : وهو الشريط الجانبي الذي يحتوي على العديد من العناصر.
- footer : وهو الجزء السفلي من القالب ويسمى أيضا بذيل الموقع .

3 - الان يجب التعديل على كل قياس خاص بالاجهزة الذكية لذلك يجب اضافة هذه الاكواد فوق الوسم : ]]></b:skin>
و التعديل على كل منها :
مثال :
- الموقع الذي عملنا عليه الشرح فى الفيديو لاظهار مقاييس شاشات الهواتف و الاجهزة الذكية من هنا : mobiletest
ملاحظة : هناك من لدي مشكل في ظهور إعلانات أدسنس على الهواتف و الاجهزة اللوحية لذلك حتى تظهر الإعلانات في مدونتك على الأجهزة المحمولة اضغط خيار فى القالب :
No , Show desktop template on mobile devices.

حتى تفهم كل ما تم شرحه فى هذا الدرس تابع مثال عملي على هذا الفيديو التعليمي

جميع الحقوق محفوضة لدى مدونة علوم و تقنيات | Privacy-Policy | سياسة الخصوصية | اتفاقية الاستخدام

تعديل : Abderhim