 |
| كيفية إضافة نمط قائمة الترقيم المخصصة (بلوجر) |
كل مدون يجب أن يسعى لجعل كل منشور له متميزًا بكل الطرق. وبناءً على ذلك، سنناقش في هذه المقالة نمطين فريدين للقوائم المرقمة (Ordered List Style). يجب أن يحتوي المقال على قوائم مرقمة (ol)، ويمكن إنشاؤها باستخدام ميزة "القائمة المرقمة".
نمط القائمة المرقمة المخصص على بلوجر
يتيح الكود الخاص بـ "القائمة المرقمة" في HTML إنشاء قائمة مرقمة. ونظرًا لأن المحرر يستخدم هذه الأداة لإضافة الكود HTML لك، فلا داعي للقلق بشأن قيامك بذلك بنفسك.
يُطلق على "القوائم المرقمة في HTML" اسمًا يشير إلى كيفية ترقيم كل عنصر في القائمة بشكل تلقائي وفقًا لـ "الترتيب". على الرغم من أنه لا يُعرَض في الكود HTML، إلا أن كل عنصر له رقم يتم إنشاؤه تسلسليًا بدءًا من 1.
ميزات القائمة المرقمة:
- امنح مدونتك مظهرًا رائعًا.
- جذب الزوار.
- طابع إبداعي في التصميم.
مشاهدة معاينة حية للإضافة:
دعونا نتعرف على كيفية إضافة نمط القائمة المرقمة المخصصة في مشاركات المدونة على بلوجر
 |
| الشرح |
كيفية إضافة نمط القائمة المرقمة المخصصة في مشاركات المدونة على بلوجر
ملاحظة هامة:
قبل التعديل على الأكواد في XML، أوصيك بأخذ نسخة احتياطية من قالب مدونتك. في حالة حدوث أي مشكلة، يمكنك استعادتها لاحقًا.
الخطوة 1: أولاً، قم بتسجيل الدخول إلى لوحة التحكم الخاصة بك على بلوجر.
الخطوة 2: في لوحة التحكم على بلوجر، انقر على "المظهر".
الخطوة 3: انقر على السهم المائل الموجود بجانب زر "تخصيص".
الخطوة 4: انقر على "تحرير HTML"، ستتم إعادة توجيهك إلى صفحة التحرير.
الخطوة 5: الآن ابحث عن الكود ]]></b:skin> أو /*]]>*/</style> وقم بلصق الأكواد CSS التالية فوقه.
كود CSS خاص بنمط القائمة 1
ol.style1{counter-reset:numbers;list-style:none;padding:0}ol.style1>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-right:55px}ol.style1>li img{margin:15px 0;width:100%;display:block}ol.style1>li #box-download img{margin:0}ol.style1>li::before{content:counter(numbers);line-height:23px;font-family:'Noto Sans',sans-serif;font-size:14px;font-weight:700;right:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#eb3b5a;border:5px solid rgba(42,203,186,1);border-radius:50px;top:-2px}ol.standard li,ol.style0 li,ol.style1 li ul li,ol.style2 li{margin-bottom:15px}ol.style1 li ul{margin-top:15px}.drK ol.style1>li::before{color:#7efff5;border-color:rgba(50,255,126,1)}
كود CSS خاص بنمط القائمة2
ol.style2{counter-reset:numbers;list-style:none;padding:0}ol.style2>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-right:55px}ol.style2>li img{margin:15px 0;width:100%;display:block}ol.style2>li::before{content:counter(numbers);line-height:23px;font-family:'var(--fontB)';font-size:14px;font-weight:700;right:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#9c27b0;border:5px solid rgb(254 202 87);border-radius:50% 0 50% 50%;top:-2px}ol.style2 li ul li{margin-bottom:15px}ol.style2 li ul{margin-top:15px}.drK ol.style2>li::before{color:#fff200;border-color:rgba(24,220,255,1)}
الخطوة 7: ثم انتقل إلى المقالة/الصفحة أو المكان الذي ترغب في إضافة القائمة المرقمة المخصصة إليه.
الخطوة 8: إذا كنت تقوم بذلك في صفحة/مقالة، فلا تنس تغيير العرض التحريري إلى عرض HTML.
الخطوة 9: الآن قم بلصق الكود HTML التالي في المكان المناسب.
كود HTML خاص بنمط القائمة 1
<ol class="style1"> <li>نمط القائمة المرقمة المخصص 1</li> <li>نمط القائمة المرقمة المخصص 1</li> <li>نمط القائمة المرقمة المخصص 1</li> <li>نمط القائمة المرقمة المخصص 1</li> </ol>
كود HTML خاص بنمط القائمة 2
<ol class="style2"> <li>نمط القائمة المرقمة المخصص 2</li> <li>نمط القائمة المرقمة المخصص 2</li> <li>نمط القائمة المرقمة المخصص 2</li> <li>نمط القائمة المرقمة المخصص 2</li> </ol>
معلومات الكاتب
اديب القربعي كنز المعلومات
اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر