أخر الاخبار

أداة رائعة لعرض مشاركات المدونة بشكل مميز بالرئيسية


لجذب الزوار وجعلهم مستخدمين دائمين في موقع الويب الخاص بك، يعد التصميم الجذاب والفريد عاملًا مهمًا. وأحد الطرق لجعل موقعك فريدًا وممتعًا هو استخدام التخطيط الشبكي (Grid Layout) وعرض المواضيع المميزة في شكل شبكي جذاب مع صور كبيرة. يجعل التخطيط الشبكي موقع الويب متنوعًا وجماليًا.

ما هو التخطيط الشبكي؟

التخطيط الشبكي (Grid Layout) هو خاصية في لغة CSS تستخدم الشبكة، حيث يتكون من صفوف وأعمدة، مما يتيح للمستخدم تصميم صفحات الويب بسهولة. يسهم التخطيط الشبكي في تنظيم العناصر للحصول على تصميم سهل الفهم وجميل من الناحية الجمالية.

أداة عرض مواضيع بلوجر بشكل مميز

سأشرح اليوم أداة برمجية تقوم بعرض المشاركات المميزة في صفحة المدونة الرئيسية لبلوجر بشكل احترافي. تتميز هذه الأداة بالاستجابة، حيث يتغير شكلها وفقًا لحجم الشاشة التي يتم عرضها عليها.

تحافظ الأداة أيضًا على نسبة عرض إلى ارتفاع الصور (Aspect ratio)، وتجعل الصور تظهر بالكامل داخل الإطار دون قص. يمكنك تغيير نسبة عرض إلى ارتفاع الصور عن طريق ضبط "padding-bottom". يوصى بقيمة 56.25% لنسبة الأبعاد 16:9 وبقيمة 75% لنسبة الأبعاد 4:3.

تتيح لك أداة عرض المواضيع في بلوجر التحكم في عدد المشاركات المعروضة في الشبكة، ويفضل تحديد 9 مشاركات. كما يمكنك تحديد المشاركات التي يجب عرضها وفقًا للتصنيفات، ويمكن القيام بذلك باستخدام خصائص العناصر في كود HTML.

أتمنى أن يكون ذلك واضحًا ومفهومًا! 

أكواد CSS الخاصة بإضافة عرض مواضيع بلوجر (ضعها فوق ]]></b:skin>)

تحميل اكواد css

لا تنسى أنه يمكنك التحكم في عرض العناصر عن طريق ضبط قيمة "padding-bottom" المرتبطة بالعنصر ".hm-slide-item".

هنا هي أكواد JavaScript الخاصة بأداة عرض مشاركات بلوجر، يُنصح بوضعها فوق علامة </body>:

 تحميل اكواد JavaScript

وهنا هي أكواد HTML الخاصة بأداة عرض آخر المواضيع، يجب وضعها في المكان المناسب:

 تحميل اكواد HTML

يمكنك التحكم في عدد المواضيع المعروضة من خلال data-results لكن يفضل الحفاظ على الرقم 9 لأنه هو المناسب لهذه الأداة، كما يمكنك التحكم في التصنيف من خلال data-label في حالة كنت تريد عرض المواضيع حسب آخر المشاركات بالترتيب فحافظ على قيمة data-label كما هي "recent

تحتاج إلى التأكد من تعديل قيمة max-width لتناسب متطلبات موقعك، حيث تحدد العرض الأقصى المسموح به للأداة في المدونة.

تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-