|
| نمط قائمة الترقيم المخصصة |
كل مدون يجب أن يسعى لجعل كل منشور له متميزًا بكل الطرق. وبناءً على ذلك، سنناقش في هذه المقالة نمطين فريدين للقوائم المرقمة (Ordered List Style). يجب أن يحتوي المقال على قوائم مرقمة (ol)، ويمكن إنشاؤها باستخدام ميزة "القائمة المرقمة".
نمط القائمة المرقمة المخصص على بلوجر
يتيح الكود الخاص بـ "القائمة المرقمة" في HTML إنشاء قائمة مرقمة. ونظرًا لأن المحرر يستخدم هذه الأداة لإضافة الكود HTML لك، فلا داعي للقلق بشأن قيامك بذلك بنفسك.
يُطلق على "القوائم المرقمة في HTML" اسمًا يشير إلى كيفية ترقيم كل عنصر في القائمة بشكل تلقائي وفقًا لـ "الترتيب". على الرغم من أنه لا يُعرَض في الكود HTML، إلا أن كل عنصر له رقم يتم إنشاؤه تسلسليًا بدءًا من 1.
ميزات القائمة المرقمة:
- امنح مدونتك مظهرًا رائعًا.
- جذب الزوار.
- طابع إبداعي في التصميم.
مشاهدة معاينة حية للإضافة:
معاينة قائمة مرقمة عادية:
- قائمة مرقمة عادية
- قائمة مرقمة عادية
معاينة قائمة مرقمة مخصصة:
- نمط القائمة المرقمة المخصص 1
- نمط القائمة المرقمة المخصص 1
- نمط القائمة المرقمة المخصص 2
- نمط القائمة المرقمة المخصص 2
دعونا نتعرف على كيفية إضافة نمط القائمة المرقمة المخصصة في مشاركات المدونة على بلوجر.
|
| صورة توضيحية |
كيفية إضافة نمط القائمة المرقمة المخصصة في مشاركات المدونة على بلوجر
ملاحظة هامة:قبل التعديل على الأكواد في 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)}لا تنسى تغيير drK. بفئة الوضع المظلم الخاص بموقعك، إذا لم يكن لديك قالب تدعم الوضع المظلم، فاحتفظ بالقيمة الافتراضية!
الخطوة 6: احفظ التغييرات في الكود HTML عن طريق النقر على هذا الرمز
الخطوة 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>
يمكنك تغيير النصوص HTML حسب رغبتك في مربع الكود!
الخطوة 10: ثم احفظ أو نشر المقالة.
تهانينا! لقد قمت بنجاح بإضافة نمط قائمة مرقمة مخصصة إلى بلوجر.
جميع الحقوق محفوظة ©
www.webwrd.com