إضافة نمط قائمة الترقيم المخصصة في بلوجر يتطلب تعديل بسيط في HTML و CSS الخاصين بمدونتك. إليك الخطوات بالتفصيل:
1. الوصول إلى محرر HTML الخاص بمدونة بلوجر:
انتقل إلى لوحة تحكم بلوجر الخاصة بك.
اختر "المظهر" (Theme) من القائمة الجانبية.
اضغط على السهم الصغير بجانب زر "تخصيص" (Customize) واختر "تعديل HTML" (Edit HTML).
2. إضافة CSS المخصص:
ابحث عن علامة <head> في كود HTML. يمكنك استخدام Ctrl+F (أو Cmd+F على نظام Mac) للبحث بسهولة.
قبل علامة </head>, ضع الكود CSS التالي:
<b:skin>
<![CDATA[
/* Custom Numbered List Style */
ol {
list-style: none; /* إخفاء الترقيم الافتراضي */
counter-reset: my-awesome-counter; /* تهيئة عداد جديد */
}
ol li {
counter-increment: my-awesome-counter; /* زيادة العداد لكل عنصر قائمة */
padding-left: 25px; /* إضافة مساحة بين الترقيم والنص */
}
ol li:before {
content: counter(my-awesome-counter) ". "; /* إضافة الترقيم المخصص */
font-weight: bold; /* جعل الترقيم بخط عريض (اختياري) */
display: inline-block;
width: 20px; /* تحديد عرض ثابت للترقيم */
margin-left: -25px; /* تحريك الترقيم إلى اليسار */
text-align: right; /* محاذاة الترقيم إلى اليمين داخل المساحة المحددة */
color: #3498db; /* تغيير لون الترقيم (اختياري) */
}
]]>
</b:skin>
content_copy
download
Use code with caution.
Css
شرح الكود CSS:
ol { list-style: none; } : هذا السطر يلغي الترقيم الافتراضي للقوائم المرتبة (<ol>).
ol { counter-reset: my-awesome-counter; } : هذا السطر يهيئ عدادًا جديدًا باسم my-awesome-counter (يمكنك اختيار اسمًا آخر). هذا ضروري لبدء الترقيم من 1 في كل قائمة جديدة.
ol li { counter-increment: my-awesome-counter; } : هذا السطر يزيد العداد بمقدار 1 لكل عنصر قائمة (<li>).
ol li:before { ... } : هذا السطر يستخدم Pseudo-element (عنصر وهمي) لإضافة الترقيم المخصص قبل كل عنصر قائمة.
content: counter(my-awesome-counter) ". ";: هذا هو الجزء الأهم. counter(my-awesome-counter) يجلب قيمة العداد الحالي، ويضيف ". " بعد الرقم (يمكنك تغيير هذا الرمز إلى أي شيء تريده).
font-weight: bold;: يجعل الترقيم بخط عريض (اختياري).
display: inline-block;: يسمح لك بتحديد عرض ثابت للترقيم (للمحاذاة).
width: 20px;: يحدد عرضًا ثابتًا للترقيم. قم بتعديل هذا الرقم حسب حجم خط الترقيم لديك.
margin-left: -25px;: يحرك الترقيم إلى اليسار لكي يظهر خارج حدود عنصر القائمة. يجب أن يكون هذا الرقم مساويًا لقيمة padding-left.
text-align: right;: يضبط محاذاة الترقيم إلى اليمين داخل المساحة المخصصة.
color: #3498db;: يغير لون الترقيم (اختياري). يمكنك تغيير قيمة هذا اللون إلى أي لون تريده باستخدام كود Hex أو اسم اللون.
3. حفظ التغييرات:
بعد إضافة الكود CSS, اضغط على زر "حفظ المظهر" (Save Theme) في الزاوية العلوية اليمنى من الشاشة.
4. استخدام القوائم المرتبة في منشوراتك:
عند كتابة منشور جديد، استخدم علامات <ol> و <li> لإنشاء قوائم مرتبة. على سبيل المثال:
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>
content_copy
download
Use code with caution.
Html
تعديلات إضافية وتخصيصات:
تغيير الرمز بعد الرقم: يمكنك تغيير الرمز بعد الرقم في content: counter(my-awesome-counter) ". "; إلى أي شيء تريده، مثل -, ), أو أي نص آخر.
تغيير لون الخط وحجمه ونوعه: يمكنك إضافة خصائص CSS إضافية إلى ol li:before لتغيير مظهر الترقيم، مثل:
font-size: 16px;
font-family: Arial, sans-serif;
color: #e74c3c;
إضافة خلفية للترقيم: يمكنك إضافة خلفية للترقيم باستخدام خاصية background-color في ol li:before.
تخصيص ترقيم مختلف لمستويات مختلفة من القوائم: إذا كنت تستخدم قوائم متداخلة، يمكنك تخصيص أنماط ترقيم مختلفة لكل مستوى باستخدام CSS. هذا يتطلب المزيد من التعقيد في الكود.
مثال على قائمة ذات نمط مختلف:
<b:skin>
<![CDATA[
/* Custom Numbered List Style (Circle) */
ol {
list-style: none;
counter-reset: my-circle-counter;
}
ol li {
counter-increment: my-circle-counter;
padding-left: 25px;
}
ol li:before {
content: counter(my-circle-counter);
font-weight: bold;
display: inline-block;
width: 20px;
margin-left: -25px;
text-align: center;
color: #ffffff;
background-color: #3498db;
border-radius: 50%; /* لجعل الشكل دائريًا */
}
]]>
</b:skin>
content_copy
download
Use code with caution.
Css
هذا الكود سيجعل الترقيم داخل دائرة ملونة.
ملاحظات هامة:
النسخ الاحتياطي: قبل إجراء أي تغييرات على كود HTML الخاص بمظهر مدونتك، قم بعمل نسخة احتياطية لتتمكن من استعادة المظهر الأصلي في حالة حدوث أي مشكلة.
التحقق من التوافق: تأكد من أن الكود CSS الذي تضيفه متوافق مع تصميم مدونتك. قد تحتاج إلى إجراء بعض التعديلات الطفيفة لتناسب مظهر مدونتك بشكل أفضل.
الاستعانة بمصادر خارجية: إذا كنت غير متأكد من كيفية تعديل كود HTML و CSS، يمكنك الاستعانة بمصادر خارجية، مثل المواقع الإلكترونية المتخصصة في تصميم الويب أو المنتديات التقنية.
باتباع هذه الخطوات، يمكنك بسهولة إضافة نمط قائمة ترقيم مخصص إلى مدونة بلوجر الخاصة بك، وجعلها أكثر جاذبية وتميزًا.
تعليقات
إرسال تعليق