لجذب الزوار وجعلهم مستخدمين دائمين في موقع الويب الخاص بك، يعد التصميم الجذاب والفريد عاملًا مهمًا. وأحد الطرق لجعل موقعك فريدًا وممتعًا هو استخدام التخطيط الشبكي (Grid Layout) وعرض المواضيع المميزة في شكل شبكي جذاب مع صور كبيرة. يجعل التخطيط الشبكي موقع الويب متنوعًا وجماليًا.
ما هو التخطيط الشبكي؟
التخطيط الشبكي (Grid Layout) هو خاصية في لغة CSS تستخدم الشبكة، حيث يتكون من صفوف وأعمدة، مما يتيح للمستخدم تصميم صفحات الويب بسهولة. يسهم التخطيط الشبكي في تنظيم العناصر للحصول على تصميم سهل الفهم وجميل من الناحية الجمالية.
أداة عرض مواضيع بلوجر بشكل مميز
سأشرح اليوم أداة برمجية تقوم بعرض المشاركات المميزة في صفحة المدونة الرئيسية لبلوجر بشكل احترافي. تتميز هذه الأداة بالاستجابة، حيث يتغير شكلها وفقًا لحجم الشاشة التي يتم عرضها عليها.
تحافظ الأداة أيضًا على نسبة عرض إلى ارتفاع الصور (Aspect ratio)، وتجعل الصور تظهر بالكامل داخل الإطار دون قص. يمكنك تغيير نسبة عرض إلى ارتفاع الصور عن طريق ضبط "padding-bottom". يوصى بقيمة 56.25% لنسبة الأبعاد 16:9 وبقيمة 75% لنسبة الأبعاد 4:3.
تتيح لك أداة عرض المواضيع في بلوجر التحكم في عدد المشاركات المعروضة في الشبكة، ويفضل تحديد 9 مشاركات. كما يمكنك تحديد المشاركات التي يجب عرضها وفقًا للتصنيفات، ويمكن القيام بذلك باستخدام خصائص العناصر في كود HTML.
أتمنى أن يكون ذلك واضحًا ومفهومًا!
أكواد CSS الخاصة بإضافة عرض مواضيع بلوجر (ضعها فوق ]]></b:skin>)
لا تنسى أنه يمكنك التحكم في عرض العناصر عن طريق ضبط قيمة "padding-bottom" المرتبطة بالعنصر ".hm-slide-item".
هنا هي أكواد JavaScript الخاصة بأداة عرض مشاركات بلوجر، يُنصح بوضعها فوق علامة </body>:
وهنا هي أكواد HTML الخاصة بأداة عرض آخر المواضيع، يجب وضعها في المكان المناسب:
يمكنك التحكم في عدد المواضيع المعروضة من خلال data-results لكن يفضل
الحفاظ على الرقم 9 لأنه هو المناسب لهذه الأداة، كما يمكنك التحكم في
التصنيف من خلال data-label في حالة كنت تريد عرض المواضيع حسب آخر
المشاركات بالترتيب فحافظ على قيمة data-label كما هي "recent
تحتاج إلى التأكد من تعديل قيمة max-width لتناسب متطلبات موقعك، حيث تحدد العرض الأقصى المسموح به للأداة في المدونة.