كيفية إنشاء قوائم أقسام مميزة في بلوجر مع أيقونات SVG وتأثيرات CSS

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

سنتعرف معاً على مميزات هذه القوائم الذكية التي تم تصميمها خصيصاً لمنصّة بلوجر، وكيف يمكنها أن تعزز من جودة مدونتك بمظهر احترافي وسهل الاستخدام. سنغطي في هذا المقال الطرق المختلفة للإضافة والتخصيص مع ضمان التوافق الكامل مع جميع الأجهزة.

كيفية إضافة قوائم أقسام مدونة بلوجر بتصميم جذاب واحترافي

دليل إضافة قوائم رئيسية متحركة لمدونة بلوجر.

المميزات الرئيسية للقوائم

قبل البدء في خطوات الإضافة، دعونا نتعرف على أهم المميزات التي تقدمها هذه القوائم الذكية:

ظهور حصري في الصفحة الرئيسية

تظهر القوائم فقط في الصفحة الرئيسية للمدونة بفضل كود الشرط:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
أيقونات SVG عالية الجودة

تصميم متكامل بأيقونات SVG يمكن تخصيص ألوانها بسهولة:
.outer-stroke { stroke: var(--linkC,#3078ffe8); }
تصميم متجاوب

تتكيف القوائم تلقائياً مع جميع أحجام الشاشات:
.Mode-Weeb.m-p-2 li { width: 30%; }

"هذه القوائم تم تطويرها خصيصاً لتحسين تجربة المستخدم وزيادة معدلات التفاعل مع المحتوى"

أهمية صناديق الأقسام المميزة لمدونتك

في عصر يتخذ فيه الزوار قرار البقاء على موقعك خلال ثوانٍ، يصبح التصميم الوظيفي عاملاً حاسماً في نجاح مدونتك. صناديق الأقسام التي نقدمها ليست مجرد عناصر زخرفية، بل هي حل استراتيجي يجمع بين الجماليات والأداء العملي.

"التصميم الجيد يجعل النظام واضحًا للمستخدم، أما التصميم العظيم فيجعله غير مرئي."

الخطوات الأساسية

فهم هيكل الكود الأساسي (HTML + CSS)
إضافة الكود إلى قالب بلوجر
تخصيص القوائم والأيقونات
تحسين التصميم للتجاوب مع جميع الشاشات

"التصميم الجيد ليس مجرد مظهر جميل، بل هو وضوح في الوظيفة وتجربة مستخدم سلسة."

احرص دائمًا على عمل نسخة احتياطية من القالب قبل إجراء أي تعديلات، وتأكد من اختبار التغييرات على أجهزة متعددة لضمان التوافق.

الخطوة 1: فهم هيكل الكود الأساسي

يتكون الكود من ثلاثة أجزاء رئيسية تعمل معًا لإنشاء قوائم الأقسام بشكل احترافي:

شرط العرض (<b:if>):
يحدد هذا الجزء مكان ظهور القوائم، حيث يتم عرضها فقط في الصفحة الرئيسية للمدونة باستخدام الشرط:
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.url == data:blog.homepageUrl + "index.html"'>
هيكل القوائم:
يتكون من العناصر التالية:
- <div class="Mode-Weeb">: الحاوية الرئيسية
- <ul>: القائمة غير المرتبة
- <li>: عناصر القائمة (كل قسم)
- أيقونات SVG مدمجة لكل قسم
أنماط التصميم (<style>):
تتحكم في الجوانب التالية:
- أحجام وألوان الأيقونات
- تخطيط العناصر
- تأثيرات الحركة

"فهم هيكل الكود هو الأساس لتعديله وتطويره بشكل صحيح دون حدوث أخطاء."

لرؤية الكود كاملًا، يمكنك استخدام Ctrl + U لعرض مصدر الصفحة، أو F12 لفتح أدوات المطور.

الخطوة 2: إضافة الكود إلى بلوجر

سنستخدم طريقة آمنة وسهلة لإضافة الكود دون الحاجة لتعديل القالب مباشرةً، وذلك عبر أداة HTML/JavaScript المدمجة في بلوجر:

النسخ والإعداد المبدئي

قم بنسخ الكود كاملاً من هذا المقال باستخدام Ctrl + A ثم Ctrl + C
الدخول إلى لوحة التحكم

<!--
  قسم القوائم الرئيسية للموقع
  يعرض هذا القسم فقط في الصفحة الرئيسية (Homepage)
-->
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.url == data:blog.homepageUrl + "index.html"'>
  
  <!-- العنصر الرئيسي للقوائم -->
  <div class="Mode-Weeb m-p-2" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
    <ul>
      
      <!-- عنصر قائمة تقنية الاتصالات -->
      <li itemprop="name">
        <a href="/search/label/تسمية" title="تسمية" itemprop="url">
          <svg class='dual-icon' viewbox='0 0 24 24'>
            <path class='outer-stroke' d='M10.07 2.81997L3.14004 8.37002C2.36004 8.99002 1.86002 10.3 2.03002 11.28L3.36001 19.24C3.60001 20.66 4.96002 21.8101 6.40002 21.8101H17.6C19.03 21.8101 20.4 20.65 20.64 19.24L21.97 11.28C22.13 10.3 21.63 8.99002 20.86 8.37002L13.93 2.82998C12.86 1.96998 11.13 1.96997 10.07 2.81997Z'/>
            <path class='inner-stroke' d='M9.88 14.38C11.15 13.17 12.85 13.17 14.12 14.38'/>
            <path class='inner-stroke' d='M16.24 12.2601C15.7 11.7301 15.1 11.3201 14.48 11.0201C12.89 10.2601 11.11 10.2601 9.51001 11.0201C8.89001 11.3201 8.3 11.7301 7.75 12.2601'/>
            <path class='inner-stroke' d='M11.9955 17H12.0045'/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
      
      <!-- عنصر قائمة إضافات بلوجر -->
      <li itemprop="name">
        <a href="/search/label/تسمية" title="تسمية" itemprop="url">
          <svg class='dual-icon' viewbox='0 0 24 24'>
            <path class='outer-stroke' d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z'/>
            <path class='inner-stroke' d='M8 12H16'/>
            <path class='inner-stroke' d='M12 16V8'/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
      
      <!-- عنصر قائمة قوالب بلوجر -->
      <li itemprop="name">
        <a href="/search/label/قوالب" title="تسمية" itemprop="url">
          <svg class="dual-icon" viewbox="0 0 24 24" fill="none">
            <path class="outer-stroke" d="M3.34997 2H12.25C12.99 2 13.6 2.61001 13.6 3.35001V4.82999C13.6 5.36999 13.26 6.04 12.93 6.38L10.03 8.94C9.63003 9.28 9.35998 9.94999 9.35998 10.49V13.39C9.35998 13.79 9.09 14.33 8.75 14.54L7.81 15.15C6.93 15.69 5.71997 15.08 5.71997 14V10.43C5.71997 9.95999 5.44999 9.35001 5.17999 9.01001L2.61999 6.31C2.27999 5.97 2.01001 5.36999 2.01001 4.95999V3.41C2.00001 2.61 2.60997 2 3.34997 2Z" stroke-miterlimit="10"/>
            <path class="outer-stroke" d="M2 12V15C2 20 4 22 9 22H15C20 22 22 20 22 15V9C22 5.88 21.22 3.91999 19.41 2.89999C18.9 2.60999 17.88 2.38999 16.95 2.23999"/>
            <path class="inner-stroke" d="M13 13H18"/>
            <path class="inner-stroke" d="M11 17H18"/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
      
      <!-- عنصر قائمة مواقع -->
      <li itemprop="name">
        <a href="/search/label/تسمية" title="تسمية" itemprop="url">
          <svg class='dual-icon' viewbox='0 0 24 24'>
            <path class='outer-stroke' d='M12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22Z'/>
            <path class='inner-stroke' d='M12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16Z'/>
            <path class='inner-stroke' d='M21.17 8C18.15 7.34 15.02 7.34 12 8'/>
            <path class='inner-stroke' d='M3.95001 6.06006L3.97001 6.12006C4.98001 9.01006 6.53001 11.6901 8.54001 14.0001'/>
            <path class='inner-stroke' d='M10.88 21.94C12.94 19.67 14.49 16.99 15.43 14.08L15.46 14'/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
      
      <!-- عنصر قائمة أدوات اونلاين -->
      <li itemprop="name">
        <a href="/search/label/تسمية" title="تسمية" itemprop="url">
          <svg class='dual-icon' viewbox='0 0 24 24'>
            <path class='outer-stroke' d='M2 9V6.5C2 4.01 4.01 2 6.5 2H9'/>
            <path class='outer-stroke' d='M15 2H17.5C19.99 2 22 4.01 22 6.5V9'/>
            <path class='outer-stroke' d='M22 16V17.5C22 19.99 19.99 22 17.5 22H16'/>
            <path class='outer-stroke' d='M9 22H6.5C4.01 22 2 19.99 2 17.5V15'/>
            <path class='inner-stroke' d='M8.5 11C9.88071 11 11 9.88071 11 8.5C11 7.11929 9.88071 6 8.5 6C7.11929 6 6 7.11929 6 8.5C6 9.88071 7.11929 11 8.5 11Z'/>
            <path class='inner-stroke' d='M7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18Z'/>
            <path class='inner-stroke' d='M16.5 9C17.3284 9 18 8.32843 18 7.5C18 6.67157 17.3284 6 16.5 6C15.6716 6 15 6.67157 15 7.5C15 8.32843 15.6716 9 16.5 9Z'/>
            <path class='inner-stroke' d='M15.5 18C16.8807 18 18 16.8807 18 15.5C18 14.1193 16.8807 13 15.5 13C14.1193 13 13 14.1193 13 15.5C13 16.8807 14.1193 18 15.5 18Z'/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
      
      <!-- عنصر قائمة الذكاء الاصطناعي -->
      <li itemprop="name">
        <a href="/search/label/تسمية" title="تسمية" itemprop="url">
          <svg class='dual-icon' viewbox='0 0 24 24'>
            <path class='outer-stroke' d='M10.75 2.44995C11.45 1.85995 12.58 1.85995 13.26 2.44995L14.84 3.79995C15.14 4.04995 15.71 4.25995 16.11 4.25995H17.81C18.87 4.25995 19.74 5.12995 19.74 6.18995V7.88995C19.74 8.28995 19.95 8.84995 20.2 9.14995L21.55 10.7299C22.14 11.4299 22.14 12.5599 21.55 13.2399L20.2 14.8199C19.95 15.1199 19.74 15.6799 19.74 16.0799V17.7799C19.74 18.8399 18.87 19.7099 17.81 19.7099H16.11C15.71 19.7099 15.15 19.9199 14.85 20.1699L13.27 21.5199C12.57 22.1099 11.44 22.1099 10.76 21.5199L9.18001 20.1699C8.88001 19.9199 8.31 19.7099 7.92 19.7099H6.17C5.11 19.7099 4.24 18.8399 4.24 17.7799V16.0699C4.24 15.6799 4.04 15.1099 3.79 14.8199L2.44 13.2299C1.86 12.5399 1.86 11.4199 2.44 10.7299L3.79 9.13995C4.04 8.83995 4.24 8.27995 4.24 7.88995V6.19995C4.24 5.13995 5.11 4.26995 6.17 4.26995H7.9C8.3 4.26995 8.86 4.05995 9.16 3.80995L10.75 2.44995Z'/>
            <path class='inner-stroke' d='M8.5 15.9401L12 8.06006L15.5 15.9401'/>
            <path class='inner-stroke' d='M13.75 13.3101H10.25'/>
          </svg>
          <span><b>تسمية</b></span>
        </a>
      </li>
    </ul>
  </div>

  <!-- أنماط CSS للقوائم -->
  <style>
    /* أنماط أساسية للأيقونات */
    .dual-icon {
      width: 35px;
      height: 35px;
      margin: 3px 0
    }
    
    /* أنماط الحد الخارجي للأيقونات */
    .outer-stroke {
      fill: none;
      stroke: var(--linkC,#3078ffe8);
      stroke-width: var(--linkC,#3078ffe8);
      stroke-linecap: round;
      stroke-linejoin: round;
      paint-order: stroke;
      width: 1px
    }
    
    /* أنماط الحد الداخلي للأيقونات */
    .inner-stroke {
      fill: none;
      stroke: var(--svgC,#000000);
      stroke-width: var(--svgC,#000000);
      stroke-linecap: round;
      stroke-linejoin: round;
      width: 0.5px
    }
    
    /* أنماط الحاوية الرئيسية */
    .Mode-Weeb {
      text-align: center;
      position: relative
    }
    
    /* أنماط القائمة غير المرتبة */
    .Mode-Weeb ul {
      clear: both;
      margin: 15px 0 20px;
      width: 100%;
      display: flex;
      padding: 0;
      flex-wrap: wrap;
      justify-content: space-between
    }
    
    /* أنماط عناصر القائمة */
    .Mode-Weeb.m-p-2 li {
      position: relative;
      width: 30%;
      list-style: none;
      line-height: 1.3em;
      text-align: center;
      border-radius: 10px;
      margin: 6px 0;
      background: var(--contentB);
      box-shadow: 0 5px 35px rgb(0 0 0/7%);
      padding: 6px 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease
    }
    
    /* أنماط روابط القائمة */
    .Mode-Weeb li a {
      display: block;
      text-decoration: none;
      color: var(--textColor);
      font-size: 12px;
      font-weight: bold
    }
    
    /* أنماط نصوص القائمة */
    .Mode-Weeb li span {
      display: block;
      padding: 0 3px
    }
    
    .Mode-Weeb li a {
  -webkit-tap-highlight-color: transparent;
}

.dual-icon {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
  </style>
  
  <!-- سكريبت لإزالة القوائم من الصفحات غير الرئيسية -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const currentPath = window.location.pathname;
      if (currentPath !== '/' & currentPath !== '/index.html') {
        document.querySelector('.Mode-Weeb')?.remove()
      }
    });
  </script>
</b:if>

- اختر مدونتك من القائمة
- انقر على التخطيط من القائمة الجانبية
إضافة الأداة:
في صفحة التخطيط:
- انقر على إضافة أداة
- اختر HTML/JavaScript من القائمة
لصق الكود:
في النافذة المنبثقة:
- الصق الكود الكامل في حقل المحتوى
- اترك حقل العنوان فارغًا أو اكتب "قوائم الأقسام"
- انقر على حفظ
تحديد الموضع:
اسحب الأداة وأسقطها في المكان المناسب مثل:
- أسفل الترويسة
- أعلى المشاركات
- في الشريط الجانبي

نصائح مهمة:

تأكد من عدم وجود أخطاء في الكود قبل الحفظ
اختر موقعاً مناسباً للعرض لا يتعارض مع عناصر أخرى
يمكنك إضافة أكثر من أداة لنفس الكود في أماكن مختلفة

"إضافة الأكواد عبر أدوات HTML/JavaScript أكثر أمانًا من تعديل القالب مباشرة، كما يسهل تعديلها أو إزالتها لاحقًا."

تأكد من حفظ التغييرات بالنقر على حفظ الترتيب بعد وضع الأداة في المكان المطلوب.

لنشر التغييرات مباشرة: المظهر → معاينة → عرض المدونة

الخطوة 3: تخصيص القوائم والأيقونات

أولاً: تعديل عناصر القوائم

كل عنصر قائمة في الكود يحتوي على ثلاثة أجزاء رئيسية يمكن تخصيصها:

تعديل الروابط:
يجب تغيير رابط كل قسم ليربط بالتصنيف الصحيح في مدونتك:
<a href="/search/label/تسمية">
يتم الاستبدال بـ:
<a href="/search/label/تقنية">
تغيير العناوين:
يوجد عنوانان يحتاجان للتعديل لكل قسم:
- خاصية title
- النص داخل <span>
كيفية تعديل الأيقونات
استبدل أيقونة SVG بأخرى من:
- Heroicons (اختر أيقونة → انقر "Copy SVG")
- Font Awesome (اختر أيقونة → اختر "SVG")
- مثال استبدال أيقونة:
```
<svg class='dual-icon' viewBox='0 0 24 24'>
  
</svg>
```
- تعديل الألوان في كود SVG
- تغيير حجم الأيقونات عبر CSS

مثال عملي لتعديل قائمة

<li itemprop="name">
  <a href="/search/label/تقنية" title="تقنية" itemprop="url">
    <svg class='dual-icon' viewbox='0 0 24 24'>
      <!-- كود SVG للأيقونة -->
    </svg>
    <span><b>تقنية</b></span>
  </a>
</li>

"احرص على توحيد نمط الأيقونات وأحجامها للحصول على مظهر متناسق ومحترف."

يمكنك إضافة أو حذف عناصر القوائم حسب عدد أقسام مدونتك، مع الحفاظ على نفس البنية الأساسية للكود.

ثانيًا: تخصيص التصميم (CSS)

يحتوي الكود على متغيرات CSS رئيسية تتحكم في المظهر العام للقوائم، ويمكنك تعديلها بسهولة:

تغيير ألوان الأيقونات:

يتم التحكم بالألوان عبر المتغيرات التالية:

:root {
  --linkC: #3078ffe8; /* لون حدود الأيقونات الخارجية */
  --svgC: #000000;   /* لون التفاصيل الداخلية للأيقونات */
  --contentB: #f9f9f9; /* لون خلفية العناصر */
}

تعديل أحجام الأيقونات:
للتغيير، عدّل القيم في الكلاس:
```
.dual-icon {
  width: 35px;  /* العرض */
  height: 35px; /* الارتفاع */
}
```

ضبط تخطيط العناصر:

لتحسين التوزيع:

.Mode-Weeb.m-p-2 li {
  width: 30%; /* يمكن تغييرها إلى 48% لعرض عنصرين في الصف */
  margin: 6px 0; /* المسافات بين العناصر */
}

تعديلات إضافية متقدمة

لإضافة تأثيرات حركية عند تمرير المؤشر:

.Mode-Weeb.m-p-2 li:hover {
  transform: scale(1.05); /* تكبير العنصر */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* إضافة ظل */
  transition: all 0.3s ease; /* سلاسة الحركة */
}

"استخدم ألوانًا متناسقة مع هوية مدونتك لتحقيق تجربة مستخدم متكاملة."

للحصول على أفضل نتيجة: Ctrl + Shift + I لاختبار التعديلات مباشرة في متصفحك قبل تطبيقها.

الخطوة 4: إضافة أقسام جديدة أو حذف موجودة

تعديل عدد أقسام القوائم عملية بسيطة لا تتطلب مهارات برمجية متقدمة:

أولاً: إضافة قسم جديد

ابحث عن أي عنصر <li> موجود في الكود
انسخ الكود كاملاً بدءاً من <li itemprop="name"> حتى </li>
الصق الكود في المكان المرغوب داخل <ul>
قم بالتعديلات التالية:
- تغيير الرابط في href="/search/label/اسم_القسم"
- تعديل النص في title و <span>
- استبدال كود SVG بأيقونة جديدة إن لزم الأمر

مثال لإضافة قسم جديد:

<li itemprop="name">
  <a href="/search/label/برمجة" title="برمجة" itemprop="url">
    <svg class='dual-icon' viewbox='0 0 24 24'>
      <!-- كود أيقونة البرمجة -->
    </svg>
    <span><b>برمجة</b></span>
  </a>
</li>

ثانياً: حذف قسم موجود

حدد موقع العنصر <li> الذي تريد حذفه
احذف الكود كاملاً من <li> إلى </li>
احرص على عدم حذف أي من الوسوم المحيطة به

"احرص على توازن عدد الأقسام مع مساحة العرض المتاحة للحصول على مظهر متناسق."

نصائح مهمة:

حافظ على نفس البنية البرمجية عند الإضافة
يفضل ألا يزيد عدد الأقسام عن 6-8 عناصر لضمان جودة العرض
اختبر التغييرات على أجهزة مختلفة بعد كل تعديل

الخطوة 5: اختبار النتيجة النهائية

بعد الانتهاء من التعديلات، يأتي دور اختبار القوائم للتأكد من عملها بشكل صحيح:

الاختبار الأساسي على الحاسوب:
- افتح الصفحة الرئيسية للمدونة
- تأكد من ظهور قوائم الأقسام بوضوح
- تحقق من عدم وجود أخطاء في التنسيق
اختبار الروابط:
- انقر على كل قسم للتأكد من:
  - صحة الرابط (يوجه للتصنيف المطلوب)
  - سرعة التحميل
  - عدم ظهور صفحات خطأ 404
اختبار التجاوب:
- استخدم أدوات المطور F12 → Toggle Device Toolbar
- اختبر على مقاسات مختلفة:
  - هواتف (360px - 576px)
  - أجهزة لوحية (768px - 992px)
  - شاشات كبيرة (1200px فأعلى)
- اختبر على متصفحات مختلفة:
  - Chrome
  - Firefox
  - Safari

"الاختبار الشامل هو الفرق بين تصميم جيد وآخر ممتاز. لا تهمل هذه الخطوة!"

أدوات مساعدة للاختبار

إذا واجهتك مشاكل:

تحقق من الأخطاء في Console (F12)
تأكد من صحة كتابة الروابط
اختبر بعد تعطيل الإضافات مؤقتاً

خاتمة المقال: صناديق تسميات احترافية تواكب تطور التصميم في بلوجر

في هذا الدليل المفصل، تعرّفنا على طريقة تركيب صناديق عرض التسميات في الصفحة الرئيسية لمدونة بلوجر باستخدام أكواد SVG وCSS احترافية ومتجاوبة. بدأنا بشرح الفكرة، ثم انتقلنا إلى إعداد الكود، وتخصيصه، ودمجه في القالب من خلال التنسيق، مع تقديم نصائح لتحسين الأداء والسيو.

تكمن قوة هذه الصناديق في أنها لا تضيف فقط لمسة جمالية احترافية لواجهة مدونتك، بل تُسهّل أيضًا على الزائرين التنقل بين أقسام المحتوى بشكل ذكي ومنظم، ما يعزز تجربة المستخدم ويزيد من فرص التفاعل والزيارات المتكررة.

إذا كنت تهتم ببناء هوية بصرية قوية لمدونتك، فإن مثل هذه الأدوات تعتبر من أهم الاستثمارات البسيطة والفعالة التي يمكنك تنفيذها اليوم.

قم بتجربة الكود وتخصيصه بما يناسب ذوقك ونوعية المحتوى الذي تقدّمه.
لا تنسَ متابعة أداء القالب بعد التركيب من خلال أدوات تحليل السرعة والسيو.
شارك هذه التجربة مع مجتمع بلوجر ليستفيد الجميع من تحسين تجربة المستخدم.

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

تابع مدونة مود ويب لمزيد من الشروحات الحصرية، وأدوات بلوجر المتقدمة، والتحديثات التي تُحدث فرقًا حقيقيًا في مدونتك.

مود ويب

كيفية إنشاء قوائم أقسام مميزة في بلوجر مع أيقونات SVG وتأثيرات CSS

المميزات الرئيسية للقوائم

ظهور حصري في الصفحة الرئيسية

أيقونات SVG عالية الجودة

تصميم متجاوب

أهمية صناديق الأقسام المميزة لمدونتك

الخطوات الأساسية

الخطوة 1: فهم هيكل الكود الأساسي

الخطوة 2: إضافة الكود إلى بلوجر

النسخ والإعداد المبدئي

نصائح مهمة:

الخطوة 3: تخصيص القوائم والأيقونات

أولاً: تعديل عناصر القوائم

مثال عملي لتعديل قائمة

ثانيًا: تخصيص التصميم (CSS)

تعديلات إضافية متقدمة

الخطوة 4: إضافة أقسام جديدة أو حذف موجودة

أولاً: إضافة قسم جديد

ثانياً: حذف قسم موجود

نصائح مهمة:

الخطوة 5: اختبار النتيجة النهائية

أدوات مساعدة للاختبار

خاتمة المقال: صناديق تسميات احترافية تواكب تطور التصميم في بلوجر

عن المؤلف

إرسال تعليق

دليلك الكامل لضبط إعدادات مودم فورجي "يمن نت" YEMEN 4G

"تفعيل 4G يمن موبايل على هواتف سامسونج، هواوي، وردمي

أفضل طريقة لمعرفة هوية الأرقام عبر التليجرام بدون برامج

إعدادات APN للاندرويد 2024 - ضبط نقطة الوصول للجيل "الرابع 4G"

جميع خدمات يمن موبايل - الاتصالات اليمنية