إخفاء أو إظهار كود أو أداة على نموذج الجوال أو سطح المكتب في مدونة بلوجر

ارتفعت في السنوات الأخيرة نسبة متصفحي الإنترنت من خلال أجهزة الهواتف المحمولة والذكية، وأصبح شرط التقدم فى محركات البحث هو أن يكون الموقع متجاوب أو مناسب للجوال (Mobile Friendly).
في بعض الأحيان نكون بحاجة إلى إظهار كود أو أداة معينة على نموذج سطح المكتب دون نموذج الجوال أو العكس، وتتجلى أهمية إخفاء أو إظهر كود أو اداة على نموذج الهاتف دون نموذج سطح المكتب، في أن تقليل الأدوات على نسخة الهاتف بقدر الإمكان يؤثر إيجابيا في سرعة التحميل، بالمقابل هناك بعض الإضافات تكون فعالة على نسخة الهاتف فقط مثل إضافة زر مشاركة الواتس آب.
سنتعرف اليوم عن كيفية إخفاء أو إظهار كود أو أداة على نسخة الهاتف أو سطح المكتب في مدونة بلوجر.
وقبل ان نذكر طرق اظهار واخفاء الأدوات، يجب التفريق بين 3 نمادج ظهور الموقع على الهاتف وهي كالتالي:

نموذج الجوال الإفتراضى

نموذج جوال بلوجر التقليدي يفتقد ظهور الأدوات والإضافات به رغم بعض المميزات التي تميزه عن القالب المتجاوب مثل سرعة تحميله.

نموذج الجوال المخصص

نموذج سطح المكتب على الجوال (القوالب المتجاوبة Responsive templates)

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

الطريقة المناسبة لنموذج الجوال الإفتراضي ونموذج الجوال المخصص:

يجب التأكد أولا من تفعيل نموذج الجوال الإفتراضي ونموذج الجوال المخصص.
من لوحة تحكم بلوجر >>> قالب.
إذا أردت إخفاء أو إظهار أدوات أخرى غير الأدوات الإفتراضية أو المخصصة إتبع الخطوات التالية:
1 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالإستعانة بـ (CTRL+F) عن (اسم الأداة) أو (معرف ID الأداة) المراد إخفاؤها أو إظهارها وسنجد كود الأداة بهذا الشكل (مثال):

<b:widget id='HTML3' locked='false' title='x الأداة' type='HTML'>

3 ـ بعد هذا الكود مباشرة locked='false' أضف أحد الأكواد التالية حسب الغرض:
إخفاء الأداة على نموذج الجوال فقط وإظهارها على نموذج سطح المكتب:

mobile='no'

إظهار الأداة على نموذج الجوال فقط وإخفائها على نموذج سطح المكتب:

mobile='only'

إظهار الأداة على كل من نموذج الجوال وعلى نموذج سطح المكتب:

mobile='yes'

4 ـ اضغط (حفظ) ... هنيئا لك :)
5 ـ يمكنك اختبار نسخة الجوال بإضافة /?m=1 إلى رابط مدونتك.

الطريقة المناسبة للقوالب المتجاوبة التى تعمل كنموذج سطح المكتب على الجوال:

إخفاء أداة HTML/JavaScript التخطيط:

باستخدام وسم الإخفاء:

1 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالإستعانة بـ (CTRL+F) عن (اسم الأداة) أو (معرف ID الأداة) المراد إخفاؤها أو إظهارها وستجد كود الأداة بهذا الشكل (مثال):

<b:widget id='HTML3' locked='false' title='x الأداة' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3 ـ أضف في كود الأداة وسم الاخفاء أو الإظهار المناسب في الأماكن المحددة:

<b:widget id='HTML3' locked='false' title='x الأداة' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.isMobileRequest == "false"'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

4 ـ اضغط (حفظ) ... هنيئا لك :)
إذا كانت الأداة تحتوى على جافا سكريبت يفضل إخفاؤه أيضا حتى تحصل على أعلى سرعة تحميل.

باستخدام تقنية Css:

1 ـ من لوحة تحكم بلوجر >>> تخطيط.
نضغط على تحرير الاداة ونقوم بنسخ (معرف ID الأداة) الذي سنجده في نهاية رابط الأداة، مثال HTML3.
2 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
3 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود ]]></b:skin> وضع قبله الكود التالي:

@media screen and (max-width:1039px){

#HTML3{

display:none;

}

}

استبدل HTML3 بمعرف ID الأداة.
استبدل 1039px بعرض المتصفح الذي تريد أختفاء الأداة فيها.
4 ـ اضغط (حفظ) ... هنيئا لك :)
من عيوب هذه الطريقة أنها تقوم بإخفاء ظاهري للأدوات، ولا تخفي الجافا سكريبت، وبالتالي لا تقلل من وقت تحميل القالب على نموذج الجوال.

إخفاء أوإظهار كود HTML/JavaScript:

نضع كود HTML/JavaScript المراد إخفاؤه أو إظهاره داخل وسم الإخفاء أو الإظهار المناسب، وذلك على الشكل التالي:

وسم الإخفاء أو الإظهار المناسب

الكود المراد إخفاؤه أو إظهاره

</b:if>

وسم إخفاء الأداة على نسخة الهاتف وإظهارها على نسخة سطح المكتب:

<b:if cond='data:blog.isMobileRequest == "false"'>

وسم إظهار الأداة على نسخة الهاتف وإخفاؤها على نسخة سطح المكتب:

<b:if cond='data:blog.isMobileRequest == "true"'>

من عيوب هذه الطريقة إنها تعمل على الهواتف الذكية فقط ولا تعمل على التابلت والآيباد.

مدون بلوجر

السبت