إذا كنت تستخدم قالب Plus UI على مدونتك، فمن المحتمل أنك لاحظت أن المنشورات تظهر بشكل عمودي، حيث يظهر منشور واحد فقط في كل مرة على الأجهزة المحمولة. ولكن ماذا لو كنت ترغب في تخصيص عرض المنشورات لتقديم تجربة مرئية أكثر جاذبية للزوار؟
في هذا المقال، سنرشدك خطوة بخطوة لكيفية القيام بذلك بسهولة من خلال تعديل بسيط على أكواد HTML الخاصة بالقالب.
لماذا قد تحتاج إلى عرض منشورين جنبًا إلى جنب؟
في عالم التدوين، تعد تجربة المستخدم أمرًا بالغ الأهمية. ومن خلال عرض منشورين جنبًا إلى جنب على مدونتك، يمكنك تحسين جمالية الموقع وجذب انتباه الزوار بسهولة أكبر. إليك بعض الأسباب التي قد تدفعك لاعتماد هذا التصميم:
- تحسين تجربة المستخدم: يجعل التنقل أكثر سلاسة ويتيح للزائر استعراض المزيد من المحتوى في وقت أقل.
- زيادة التفاعل: من خلال تقديم خيارات متعددة في آنٍ واحد، مما يشجع على النقر والمشاهدة.
- تصميم أنيق وجذاب: يمنح المدونة مظهرًا احترافيًا وحديثًا.
- استغلال أفضل للمساحة: خاصة على الشاشات الكبيرة أو الأجهزة اللوحية.
- مضاعفة فرص الإعلانات: حيث يمكن عرض محتوى تسويقي بجانب المقالات الأساسية.
ملاحظة!
قبل تطبيق هذا التغيير، تأكد من أن القالب متجاوب مع مختلف الأجهزة لضمان الحفاظ على تجربة مستخدم ممتازة.
أسهل طريقة تحكم في شكل مدونتك بطريقة احترافية في Plus UI
اتبع الخطوات التالية بعناية لتطبيق هذا التعديل بنجاح:
- تسجيل الدخول إلى لوحة تحكم Blogger.
- افتح حسابك على Blogger.
- انتقل إلى لوحة التحكم الخاصة بالمدونة التي تستخدم قالب Plus UI.
- الانتقال إلى تحرير القالب
- اضغط على خيار المظهر
(Theme). - انقر على زر القائمة المنسدلة بجانب زر "تخصيص".
- اختر تحرير
HTMLللوصول إلى أكواد القالب. - البحث عن الكود الأساسي
- اضغط على
Ctrl + F(في ويندوز) أوCommand + F(في Mac) لفتح مربع البحث. - ابحث عن الكود التالي:
<!-- [ <body> open ] -->
تعديل الكود لعرض المنشورين جنبًا إلى جنب
بعد العثور على الكود، ستجد أسفله بعض الأكواد المشابهة لهذا الشكل:
<b:attr name='id' value='mainCont'/>
<!-- [ Show only one grid column in Mobile ] -->
<b:class cond='data:view.isMultipleItems' name='oneGrd'/>
<!-- [ Enable tag below to change Mobile Menu style, try 'MN-2', 'MN-3' or 'MN-4' ] -->
<b:class name='MN-3 mobS'/>
ما عليك القيام به:
- احذف الكود الذي يحتوي على هذا السطر:
<b:class cond='data:view.isMultipleItems' name='oneGrd'/>شرح مفصل لجميع العناصر الموجودة في الكود
الكود <b:attr name='id' value='mainCont'/> يُستخدم لتحديد معرف (ID) للعنصر الرئيسي في القالب. هذا المعرف يساهم في تمييز العنصر وتطبيق الأنماط والتعديلات عليه باستخدام CSS أو JavaScript، مما يسهل التحكم في التصميم والعناصر الأخرى.
أما الكود <b:class cond='data:view.isMultipleItems' name='oneGrd' /> فهو يحدد شرطًا لتطبيق نمط معين عند عرض عدة منشورات. في هذه الحالة، يتم تعيين نمط oneGrd لعرض المنشورات في عمود واحد على الأجهزة المحمولة، مما يضمن تجربة مستخدم بسيطة ومريحة.
وأخيرًا، الكود <b:class name='MN-3 mobS' /> يسمح بتطبيق نمط تصميم محدد للقائمة على الأجهزة المحمولة. يمكن تغييره إلى خيارات أخرى مثل MN-2 أو MN-4 لتخصيص شكل القائمة، مما يوفر مرونة في تصميم وتنسيق المظهر بناءً على تفضيلات المدون.
نصائح لتحسين المظهر بعد التعديل
بعد الانتهاء من تعديل التصميم لعرض منشورين جنبًا إلى جنب، من المهم الاهتمام ببعض التفاصيل لضمان الحصول على مظهر جذاب وتجربة مستخدم مريحة. إليك بعض النصائح التي ستساعدك في تحسين التصميم وتقديم محتوى مميز:
- تأكد من حجم الصور: استخدم صورًا متناسقة بأبعاد مناسبة لضمان عرضها بشكل واضح ومتناسق.
- استخدم ألوانًا متناسقة: اختر ألوانًا متناغمة مع هوية مدونتك، وتجنب الألوان الصارخة التي تشتت الانتباه.
- تحسين الخطوط: استخدم خطوطًا واضحة وسهلة القراءة مع حجم مناسب لتوفير تجربة قراءة مريحة.
- مراعاة المسافات: احرص على وجود مسافات كافية بين العناصر لضمان تنظيم محتوى مرئي مريح للعين.
- اختبار التصميم: جرّب المدونة على مختلف الأجهزة والشاشات للتأكد من أن العرض الجانبي يعمل بشكل جيد.
- استخدام العناصر التفاعلية: أضف أزرار المشاركة والتعليقات لزيادة تفاعل الزوار مع المحتوى.
- تقليل حجم الصور: لضمان سرعة تحميل الصفحة، استخدم أدوات لضغط الصور دون التأثير على جودتها.
ملاحظة:!
تأكد من متابعة إحصائيات المدونة بعد التعديل لمعرفة تأثير التغييرات على معدل التفاعل وتجربة المستخدم.
الخاتمة
باتباع هذه الخطوات، ستتمكن من تقديم محتوى منظم يلفت انتباه الزوار ويعزز من تفاعلهم. احرص دائمًا على تجربة التعديلات للتأكد من توافقها مع مختلف الأجهزة.
بهذه الخطوات، يمكنك تحسين تجربة المستخدم. استمتع بمظهر جذاب ومميز لمدونتك.
الأسئلة الشائعة (FAQs)
ما الهدف من استخدام الكود <b:attr name='id' value='mainCont'/> في قالب Plus UI؟
الهدف هو تعيين معرف فريد للعنصر الرئيسي في القالب، مما يسهل التحكم في مظهره وسلوكه باستخدام أكواد CSS أو JavaScript.
كيف يمكنني تعديل عدد الأعمدة المعروضة على الأجهزة المحمولة؟
يمكنك تعديل الكود <b:class cond='data:view.isMultipleItems' name='oneGrd'/> لإظهار أكثر من عمود واحد عبر إزالة أو تعديل هذا السطر حسب احتياجاتك.
ما هي الفائدة من تغيير قيمة MN-3 في الكود <b:class name='MN-3 mobS' />؟
تغيير القيمة إلى MN-2 أو MN-4 يتيح لك تخصيص شكل قائمة التنقل على الأجهزة المحمولة، مما يمنح تجربة مستخدم مختلفة وأكثر ملاءمة.
إذا وجدت هذا المقال مفيدًا، شارك رأيك في التعليقات وأخبرنا عن أي ميزات أخرى تود التعرف عليها!
from أصل للمعلوميات https://ift.tt/rcj0WwQ
via IFTTT
