نموذج الجوال وطرق اعداده والتعامل معه

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

أولا نوضح الادوات الرسمية في بلوجر التي يدعمها نموذج الجوال

1. آداة الصفحات
2. آداة رأس الصفحة
3. صندوق المواضيع
4. آداة الملف الشخصي
5. آداة أدسنس الرسمية
6. آداة الإسناد (تدعمه بلوجر)

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

كيف نفعل تلك الأدوات على نموذج الهاتف فقط او نلغيها من عليه أو نجعلها مشتركة بين نموذج الهاتف ونموذج سطح المكتب

عبر الثلاث اكواد التالية

mobile='only'    تفعيلها على الهاتف فقط
mobile='no'      عدم تفعيلها على نموذج الهاتف
mobile='yes'     تفعيلها على نموذج الهاتف ونموذج سطح المكتب وغالبا تفعل تلقائيا بدون الكود
كيفة اضافة تلك الاكواد ؟ نبحث عن الإضافة ونضيف لها الكود كما بالمثال التالي

mobile='only' type='PageList'>

ما سبق يخص نموذج الهاتف العادي التابع لبلوجر

هناك نموذج هاتف يسمى النموذج المخصص وهو يفعل بخطوتين 

الاولى  بنفس طريقة تفعيل السابق لكن بإختيار نموذج مخصص كما في الصورة

الثانية البحث عن الوسم

واستبداله بالكود التالي

يمكنك التعامل مع الادوات السابقة وهذا النموذج بنفس الشكل

لكن هذا النموذج بما انه يعتمد على تصميم قالبك فإن لم يكن تصميم قالبك منظم ومضبوط قد يكون النموذج غير مضبوط كيف نضبطه

هنا تحتاج بعض الخبرة في الـ css ستقوم بتعديل النموذج بإستخدام لغة css بشكل طبيعي كأنك تتعامل مع قالبك العادي لكن الفرق انك ستضيف للمعرف معرف آخر خاص بالجوال وهو  .mobile

مثال أنا اريد التعديل على الهيدر ولكن لاعدل الهيدر في نموذج الهاتف فقط على فعل التالي

نفترض ان معرف الهيدر هو #header 

لنجعل التعديل في نموذج الهاتف فقط نضيف قبله معرف الهاتف فيصبح بالمظهر التالي

.mobile #header 

ونضيف ما نريد من اكواد الـ CSS وهكذا مع باقي الاجزاء التي تريد تعديلها

المرحلة الأخيرة التعامل مع الإضافات داخل القالب

هنا بعدما قمت بإعداد نموذج الجوال الخاص بك او ان كان معد مسبقاً

نريد مثلا أن نضيف به كود أو وحدة اعلانية

استخدم الكود التالي

كن مدون

ما هو معلم بالأحمر في الكود السابق هذا تحذفه هو فقط مثال

ما فعلته في الكود السابق انني اعطيت أمرين الأمر الأول وهو الكود الأحمر الأول

أن يظهر رابط واسم كن مدون هذا خاص بالمظهر على الجوال

اما الثاني فهو اظهار رابط ولكن بدلا من كلمة كن مدون وضعت صورة

اذاً عندما تفتح بنموذج سطح المكتب ستظهر صورة عندما تفتح بنموذج الجوال يظهر رابط فقط

وقس على ذلك باقي الأشياء مثلا وحده اعلانية واحده بحجم للجوال واخرى بحجم لسطح المكتب

الى آخره

نفرض مثلا اريد اظهار شئ على نموذج الجوال فقط استخدم الكود التالي

اضف هنا ما تريد

طبعا لمن لا يعرف كيف يظهر نموذج الجوار الخاص بمدونته ويتصفحه فقط بعد رابط المدونة اضف الكود المعلم بالأحمر كما في المثال التالي

http://bloggerprogram2015.blogspot.com/?m=1

الى هنا انتهى موضوعنا أى سؤال أو استفسار حول الموضوع أخبرني في تعليق

تحياتي