أولا نوضح الادوات الرسمية في بلوجر التي يدعمها نموذج الجوال
- آداة الصفحات
- آداة رأس الصفحة
- صندوق المواضيع
- آداة الملف الشخصي
- آداة أدسنس الرسمية
- آداة الإسناد (تدعمه بلوجر)
نعم هذه فقط هي الادوات التي يدعمها نموذج الجوال ومعنى يدعمها اى تصبح متجاوبة تلقائيا وتعرض على الهواتف بشكل مضبوط وللأسف بعضها أساسا لا نستخدمه يعني آداة الإسناد عادة نحذفها آداة أدسنس الرسمية لاتعمل مع غالبية القوالب لكن يجب ان نوضح الامر يكون الموضوع متكامل
كيف نفعل تلك الأدوات على نموذج الهاتف فقط او نلغيها من عليه أو نجعلها مشتركة بين نموذج الهاتف ونموذج سطح المكتب
عبر الثلاث اكواد التالية
mobile='only' تفعيلها على الهاتف فقط mobile='no' عدم تفعيلها على نموذج الهاتف
mobile='yes' تفعيلها على نموذج الهاتف ونموذج سطح المكتب وغالبا تفعل تلقائيا بدون الكود
كيفة اضافة تلك الاكواد ؟ نبحث عن الإضافة ونضيف لها الكود كما بالمثال التالي
<b:widget id='PageList1' locked='false' title='الصفحات' mobile='only' type='PageList'>
ما سبق يخص نموذج الهاتف العادي التابع لبلوجر
هناك نموذج هاتف يسمى النموذج المخصص وهو يفعل بخطوتين
الاولى بنفس طريقة تفعيل السابق لكن بإختيار نموذج مخصص كما في الصورة
الثانية البحث عن الوسم <body>
واستبداله بالكود التالي
<body expr:class='"loading" + data:blog.mobileClass'>
يمكنك التعامل مع الادوات السابقة وهذا النموذج بنفس الشكل
لكن هذا النموذج بما انه يعتمد على تصميم قالبك فإن لم يكن تصميم قالبك منظم ومضبوط قد يكون النموذج غير مضبوط كيف نضبطه
هنا تحتاج بعض الخبرة في الـ css ستقوم بتعديل النموذج بإستخدام لغة css بشكل طبيعي كأنك تتعامل مع قالبك العادي لكن الفرق انك ستضيف للمعرف معرف آخر خاص بالجوال وهو .mobile
مثال أنا اريد التعديل على الهيدر ولكن لاعدل الهيدر في نموذج الهاتف فقط على فعل التالي
نفترض ان معرف الهيدر هو #header
لنجعل التعديل في نموذج الهاتف فقط نضيف قبله معرف الهاتف فيصبح بالمظهر التالي
.mobile #header
ونضيف ما نريد من اكواد الـ CSS وهكذا مع باقي الاجزاء التي تريد تعديلها
المرحلة الأخيرة التعامل مع الإضافات داخل القالب
هنا بعدما قمت بإعداد نموذج الجوال الخاص بك او ان كان معد مسبقاً
نريد مثلا أن نضيف به كود أو وحدة اعلانية
استخدم الكود التالي
<b:if cond="data:blog.isMobile">
<!--المظهر على الجوال-->
<a href="http://cnmu.blogspot.com">كن مدون</a>
<b:else/>
<!--المظهر على سطح المكتب-->
<a href="http://cnmu.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7XKEecxHVuqSHr-eMAwrLw3VX9t_vxEJqspEqYR9lfSyDZmPIr6a5iMhBIsay74gpArikHiFJt1KJkmYy-pXfDogrGvCXGnCvH5o5UZcuE7_jWEsoBTUOzQQxgKE9jTQpYguRxBDNlo/s1600/468x60.png"/></a>
</b:if>
ما هو معلم بالأحمر في الكود السابق هذا تحذفه هو فقط مثال
ما فعلته في الكود السابق انني اعطيت أمرين الأمر الأول وهو الكود الأحمر الأول
أن يظهر رابط واسم كن مدون هذا خاص بالمظهر على الجوال
اما الثاني فهو اظهار رابط ولكن بدلا من كلمة كن مدون وضعت صورة
اذاً عندما تفتح بنموذج سطح المكتب ستظهر صورة عندما تفتح بنموذج الجوال يظهر رابط فقط
وقس على ذلك باقي الأشياء مثلا وحده اعلانية واحده بحجم للجوال واخرى بحجم لسطح المكتب
الى آخره
نفرض مثلا اريد اظهار شئ على نموذج الجوال فقط استخدم الكود التالي
<b:if cond="data:blog.isMobile">
اضف هنا ما تريد
</b:if>
طبعا لمن لا يعرف كيف يظهر نموذج الجوار الخاص بمدونته ويتصفحه فقط بعد رابط المدونة اضف الكود المعلم بالأحمر كما في المثال التالي
http://cnmu.blogspot.com/?m=1
ليست هناك تعليقات:
لا تذهب دون أن تترك تعليقك على الموضوع
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.