شرح كيفية برمجة و جعل قالب مدونة بلوجر متجاوب Responsive design Blogger و متوافق مع جميع شاشات الاجهزة الذكية المحمولة SMARTPHONES مثل الهواتف SMALL MOBILES و اجهزة اللوحية TABLETS
مع التقدم الكبير الذي عرفه عالم الاجهزة و الهواتف واللوحات الذكية فقد اصبح عدد مستخدمي هذه الأجهزة كثيرا و خاصة فى وقتنا الحالي بذلك نجد ان متصفحي مواقع النت عبر الجوال اصبح كبير , اذن ان كان لك مدونة و هي ليست حتى الان متوافقة مع شاشات الاجهزة الذكية فيجب الاسراع لجعل تصميمها متجاوب مع جميع الشاشات المحمولة.
فى هذا الدرس على مدونة علوم و تقنيات ساقدم لكم شرح مفصل حول أساسيات وخطوات جعل قالب بلوجر متجاوب ومتوافق مع جميع الأجهزة مثل : الهواتف الذكية و اللوحية بمختلف المقاسات " Responsive design "
حيث عندما يقوم الزائر من اي جهاز محمول بتصفح مدونتك سيتم توجيهه الى نسخة الشاشة المحمولة وبالطبع سنكون هذه النسخة ذو مقاسات واضحة وسهلة التصفح .
يمكن عبر اداة mobile friendly انت تعرف ان كان قالبك متجاوب مع شاشات المتعددة
لذلك ان كنت تستعمل تلك النسخة اليك بعض الطرق لاظهار و اخفاء الاضافات الخاصة بمدونتك.
- الاضافات الافتراضية لمدونة بلوجر فى الاغلب تكون هكذا : 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 ان ترى نتيجة عبر اظهار موقعك فى جميع شاشات متعددة خاصة بالهواتف الذكية و اللوحية
الامر صعب شرحه لانه يحتاج الى خبرة فى اكواد CSS لذلك ساقدم لك طريقة مبسطة لعمل ذلك و ستكون كعينة حول طرق برمجة و تعديل على مظهر مدونتك على شاشات الاجهزة المحمولة
1- يجب اضافة هذا الكود الى مدونتك تحت الوسم <head> :
2 - المرحلة الثانية و هي التعديل على مقاسات مدونتك لتكون متجاوبة مع شاشات الاجهزة المحمولة يجب عليك اولا اخد فكرة عن العناصر الاساسية التى يجب اولا التعديل عليها و هي :
- body : وهو جسم أو بدن القالب الرئيسي.
- outer wrapper : وهو الغلاف الخارجي وداخله توجد كل العناصر.
- header : وهو الجزء العلوي من القالب.
- main wrapper : وهو الجزء المجمع للعناصر الرئيسية في الصفحات.
- post : وهو مكان المواضيع.
- sidebar : وهو الشريط الجانبي الذي يحتوي على العديد من العناصر.
- footer : وهو الجزء السفلي من القالب ويسمى أيضا بذيل الموقع .
3 - الان يجب التعديل على كل قياس خاص بالاجهزة الذكية لذلك يجب اضافة هذه الاكواد فوق الوسم : ]]></b:skin>
و التعديل على كل منها :
مثال :
- الموقع الذي عملنا عليه الشرح فى الفيديو لاظهار مقاييس شاشات الهواتف و الاجهزة الذكية من هنا : mobiletest
ملاحظة : هناك من لدي مشكل في ظهور إعلانات أدسنس على الهواتف و الاجهزة اللوحية لذلك حتى تظهر الإعلانات في مدونتك على الأجهزة المحمولة اضغط خيار فى القالب :
No , Show desktop template on mobile devices.
حتى تفهم كل ما تم شرحه فى هذا الدرس تابع مثال عملي على هذا الفيديو التعليمي
ان نال الدرس اعجابك شارك مع اصدقائك
مع التقدم الكبير الذي عرفه عالم الاجهزة و الهواتف واللوحات الذكية فقد اصبح عدد مستخدمي هذه الأجهزة كثيرا و خاصة فى وقتنا الحالي بذلك نجد ان متصفحي مواقع النت عبر الجوال اصبح كبير , اذن ان كان لك مدونة و هي ليست حتى الان متوافقة مع شاشات الاجهزة الذكية فيجب الاسراع لجعل تصميمها متجاوب مع جميع الشاشات المحمولة.
فى هذا الدرس على مدونة علوم و تقنيات ساقدم لكم شرح مفصل حول أساسيات وخطوات جعل قالب بلوجر متجاوب ومتوافق مع جميع الأجهزة مثل : الهواتف الذكية و اللوحية بمختلف المقاسات " 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.