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

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

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

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

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

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

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

طبعا هناك من يستعمل النسخة الافتراضية الخاصة ببلوجر للاجهزة المحمولة لكنها غير فعالة لاظهار الشكل و التصميم الحقيقي لمدونتك بل تصميم قالب بسيط الخاص ببلوجر
لذلك ان كنت تستعمل تلك النسخة اليك بعض الطرق لاظهار و اخفاء الاضافات الخاصة بمدونتك.
- الاضافات الافتراضية لمدونة بلوجر فى الاغلب تكون هكذا :   Header - Blog - Profile - PageList - AdSense - Attribution
- ان اردت التحكم فى ظهور هذه الاضافات على شاشات الاجهزة المحمولة يجب عليك  اضافة هذه الاكواد على كل اضافة widgets تريد التعديل عليها من القالب.
مثال : على اضافة ارشيف المدونة BlogArchive سيكون widget الخاص به هكذا :

الان تابع معي :
-  ان اردت الاضافة تظهر فى شاشة الحاسوب و شاشة الاجهزة المحمولة اضف الكود 'mobile='yes  هكذا :
mobile='yes' title='Blog Archive' type='BlogArchive'>
-  ان اردت الاضافة تظهر فى شاشة الحاسوب و لا تظهر على شاشة الاجهزة المحمولة اضف الكود 'mobile='no  هكذا :
mobile='no' title='Attribution' type='Attribution'>
-  ان اردت الاضافة لا تظهر فى شاشة الحاسوب وتظهر على شاشة الاجهزة المحمولة اضف الكود 'mobile='only هكذا :
mobile='only' title='Blog Archive' type='BlogArchive'>

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

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

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

1- يجب اضافة هذا الكود الى مدونتك تحت الوسم :


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

3 - الان يجب التعديل على كل قياس خاص بالاجهزة الذكية لذلك يجب اضافة هذه الاكواد فوق الوسم : ]]>
و التعديل على كل منها :

@media screen and (max-width : 1280px) { /* CSS CODE HERE FOR DESKTOP ---*/ } @media screen and (max-width : 1024px) { /* CSS CODE HERE FOR TABLETS ---*/ } @media screen and (max-width : 768px) { /* CSS CODE HERE FOR SMALL TABLETS ---*/ } @media screen and (max-width : 640px) { /* CSS CODE HERE FOR IPHONE ---*/ } @media screen and (max-width : 480px) { /* CSS CODE HERE FOR SMARTPHONES ---*/ } @media screen and (max-width : 320px) { /* CSS CODE HERE FOR SMALL MOBILES ---*/ }

مثال :

@media screen and (max-width : 320px) { /* CSS FOR SMALL OLD MOBILES ------------*/ #outer-wrapper{width:320px;margin:0px auto;padding:0;overflow:hidden;} #header{width:320px;margin:0 auto;padding:0;float:none} #main-wrapper{width:320px;float:right;margin:0;padding:0;overflow:hidden;} #footer{width:320px;float:none;margin:0 auto;padding:0;overflow:hidden;} #sidebar-wrapper{width:320px;margin:0 auto; float:none;} .post{ width:320px ;margin:0 auto;}

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

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