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

الصفحات

آخر الأخبار

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


قبل تحميل الملفات

اضغط لايك لصفحتنا علي الفيس بوك قوود توينز ليصلك اخر تدوينات المدونة

جعل المدونة متوافقة مع جميع المتصفحات


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

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

ما اهمية أكواد Meta Tag لتحسين السيو


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

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

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

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

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


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

لذلك إذا كنت تستخدم هذه النسخة ، فإليك بعض الطرق لإظهار وإخفاء المكونات الإضافية لمدونتك.

- الاضافات الافتراضية لمدونة بلوجر فى الاغلب تكون هكذا :   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'>

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

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


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

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

يجب اضافة هذا الكود الى مدونتك تحت الوسم  <b:skin> :


كما الشكل بالضبط :

start youtube responsive
start youtube responsive


ومن ثم يمكنك الفحص للتأكد من نجاح البرمجة وضبط فيديوهات اليوتيوب وغيرها بطريقة صحيحة من نفس الرابط mobiletest


تعليقات