الدرس 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.

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

    واتساب

    مقالات متعلقة