القائمة الرئيسية

الصفحات

اجعل أي قالب بلوجر متجاوب مع جميع شاشة



اجعل أي قالب بلوجر متجاوب مع جميع شاشة


اشرح كيفية البرمجة وجعل تصميم Blogger سريع الاستجابة متوافقًا مع جميع شاشات الهواتف الذكية ، مثل الهواتف المحمولة الصغيرة وأجهزة الكمبيوتر اللوحية.


مع التقدم الكبير في عالم الأجهزة الذكية والهواتف واللوحات ، أصبح عدد مستخدمي هذه الأجهزة كثيرًا ، خاصة في الوقت الحاضر ، لذلك نجد أن مستخدمي الإنترنت عبر الهاتف المحمول أصبحوا مهمين ، لذلك إذا كان لديك blog وأنه غير متوافق حتى الآن مع شاشات الأجهزة الذكية. قم بتسريعها لجعل تصميمها يستجيب لجميع شاشات الهاتف المحمول.


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



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


باستخدام أداة Mobiletest ، يمكنك معرفة ما إذا كان طرازك حساسًا لعدة شاشات


إظهار وإخفاء المكونات الإضافية على شاشة الهاتف ، استجابةً لقالب مدونة بلوجر الافتراضي


بالطبع ، هناك من يستخدمون الإصدار الافتراضي من Blogger للأجهزة المحمولة ، ولكن ليس من الفعال إظهار الشكل والتصميم الفعلي لمدونتك ، فالأمر يتعلق أكثر بتصميم قالب بسيط. لـ Blogger لذلك إذا كنت تستخدم هذا الإصدار ، فإليك بعض الطرق لإظهار وإخفاء المكونات الإضافية لمدونتك.

  • المكونات الإضافية الافتراضية لـ Blogger هي على الأرجح ما يلي: Header - Blog - Profile - Page List - AdSense - Attribution

  • - إذا كنت تريد التحكم في مظهر هذه الوظائف الإضافية على شاشات الأجهزة المحمولة ، فأنت بحاجة إلى إضافة هذه الرموز إلى كل امتداد عنصر واجهة مستخدم تريد تحريره من النموذج.

مثال: بالنسبة لمكوِّن إضافي لـ BlogArchive ، ستبدو عنصر واجهة المستخدم الخاص به كما يلي:



الآن تابع معي:

 إذا كنت ترغب في إضافته إلى شاشة الكمبيوتر وشاشة الجهاز المحمول ، فقم بإضافة الرمز 'mobile =' yes ، مثل هذا:


mobile='yes' title='Blog Archive' type='BlogArchive'>

إذا كنت تريد إضافته للظهور على شاشة الكمبيوتر وليس على شاشة الجهاز المحمول ، أضف الرمز 'mobile =' no مثل هذا:


mobile='no' title='Attribution' type='Attribution'>

إذا كنت ترغب في إضافته فلا يظهر على شاشة الكمبيوتر ويظهر على شاشة الأجهزة المحمولة ، فقط أضف الرمز 'mobile =' ، لذلك:


mobile='only' title='Blog Archive' type='BlogArchive'>

على Mobiletest ، يمكنك رؤية نتيجة من خلال عرض موقعك على جميع الشاشات المتعددة للهواتف الذكية والأجهزة اللوحية


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


بالطبع ، في هذه المرحلة ، لن نعتمد على إصدار Blogger الافتراضي ، لكننا سنبرمج رموز CSS لكل حجم لشاشة الجهاز الذكي ، بناءً على أكواد CSS في النموذج الخاص بك وننشئ ظهور مدونتك.


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


تحتاج إلى إضافة هذا الرمز إلى مدونتك تحت العلامة <b:skin>:



/*------start youtube responsive arabes1.com------*/ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 100; left: 100; width: 100%; height: 100%; } .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed { max-width: 100%;} /*------end youtube responsive arabes1.com------*/


ثم يمكنك التحقق للتأكد من نجاح البرمجة وضبط YouTube ومقاطع الفيديو الأخرى بشكل صحيح من نفس رابط mobiletest



هل اعجبك الموضوع :

تعليقات