الاثنين، 8 سبتمبر 2014

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

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

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

  1. آداة الصفحات
  2. آداة رأس الصفحة
  3. صندوق المواضيع
  4. آداة الملف الشخصي
  5. آداة أدسنس الرسمية
  6. آداة الإسناد (تدعمه بلوجر)
نعم هذه فقط هي الادوات التي يدعمها نموذج الجوال ومعنى يدعمها اى تصبح متجاوبة تلقائيا وتعرض على الهواتف بشكل مضبوط وللأسف بعضها أساسا لا نستخدمه يعني آداة الإسناد عادة نحذفها آداة أدسنس الرسمية لاتعمل مع غالبية القوالب لكن يجب ان نوضح الامر يكون الموضوع متكامل
كيف نفعل تلك الأدوات على نموذج الهاتف فقط او نلغيها من عليه أو نجعلها مشتركة بين نموذج الهاتف ونموذج سطح المكتب
عبر الثلاث اكواد التالية
mobile='only'    تفعيلها على الهاتف فقط
mobile='no'      عدم تفعيلها على نموذج الهاتف
mobile='yes'     تفعيلها على نموذج الهاتف ونموذج سطح المكتب وغالبا تفعل تلقائيا بدون الكود
كيفة اضافة تلك الاكواد ؟ نبحث عن الإضافة ونضيف لها الكود كما بالمثال التالي
mobile='only' type='PageList'>


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

blogger Custom mobile template
الثانية البحث عن الوسم
واستبداله بالكود التالي
يمكنك التعامل مع الادوات السابقة وهذا النموذج بنفس الشكل
لكن هذا النموذج بما انه يعتمد على تصميم قالبك فإن لم يكن تصميم قالبك منظم ومضبوط قد يكون النموذج غير مضبوط كيف نضبطه
هنا تحتاج بعض الخبرة في الـ css ستقوم بتعديل النموذج بإستخدام لغة css بشكل طبيعي كأنك تتعامل مع قالبك العادي لكن الفرق انك ستضيف للمعرف معرف آخر خاص بالجوال وهو  .mobile
مثال أنا اريد التعديل على الهيدر ولكن لاعدل الهيدر في نموذج الهاتف فقط على فعل التالي
نفترض ان معرف الهيدر هو #header 
لنجعل التعديل في نموذج الهاتف فقط نضيف قبله معرف الهاتف فيصبح بالمظهر التالي
.mobile #header 
ونضيف ما نريد من اكواد الـ CSS وهكذا مع باقي الاجزاء التي تريد تعديلها

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

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

اضف هنا ما تريد
طبعا لمن لا يعرف كيف يظهر نموذج الجوار الخاص بمدونته ويتصفحه فقط بعد رابط المدونة اضف الكود المعلم بالأحمر كما في المثال التالي
http://cnmu.blogspot.com/?m=1
الى هنا انتهى موضوعنا أى سؤال أو استفسار حول الموضوع أخبرني في تعليق

تحياتي

ليست هناك تعليقات:

إرسال تعليق