تغير شكل التنقيط و شكل ترقيم الأسطر في قالب بلوجر

تغير شكل التنقيط و شكل ترقيم الأسطر في قوالب بلوجر

تغيير ستايل الترقيم والتنقيط في قالب بلوجر

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

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

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

بالإضافة إلى ذلك، يُحسِّن التنسيق الجيّد للترقيم والتنقيط من نتائج السيو (SEO)، حيث يسهل على محركات البحث فهم بنية المحتوى وتقديمه بشكل أفضل للزوار.

بالتالي، لا ينبغي الاستهانة بأهمية هذا الجانب، بل يُستحسن تعديله بعناية ضمن إعدادات القالب أو من خلال التخصيص اليدوي لـ CSS، لضمان تقديم تجربة قراءة احترافية وجذابة.

شرح تركيب كود css لتغير الستايل

نذهب الى اكواد القالب و نبحث عن  </head>  و نلصق الاكواد التالية اعلاها

الكود الخاص بالتنقيط

  <style>

.post-body ul li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:4px 0;}

.post-body ul li:before{content:'';width:8px;height:8px;border-radius:50%;background-color:var(--iconCs);display:inline-block;flex-shrink:0;margin-top:8px;}

.post-body ul li:not(:last-child):after{content:'';width:1.5px;height:100%;background-color:var(--iconCs);position:absolute;right:3px;top:18px;}

  </style>

الكود الخاص بالترقيم

 <style>

 

  .post ol {

    list-style-type: none;

    counter-reset: custom-counter; 

    padding-left: 0; 

  }

  .post ol li {

    counter-increment: custom-counter; 

    margin-bottom: 10px;

    position: relative;

    padding-right: 40px; 

    padding-left: 20px; 

    font-size: 16px; 

    line-height: 1.6; 

    text-align: right; 

  }

  .post ol li::before {

    /* الكود الأساسي */

    content: counter(custom-counter);

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 25px;

    height: 25px;

    line-height: 25px;

    text-align: center;

    background-color: #3498db;

    color: #fff;

    border-radius: 50%;

    font-size: 14px;

    font-weight: bold;

    transition: all 0.3s ease;

  }

  .post ol li:hover::before {

    background-color: #e74c3c;

    transform: translateY(-50%) scale(1.5); 

  }

  

  </style>

و ثم قم بالحفظ

تحرير المقال