ضافة قائمة ترقيم مخصصة لبلوجر

صِوان نمط قائمة ترقيم مخصص لبلوچر هو نمط عصري يضيف جمالية لاسلوب عرض قائمة مرقمة، هذا النمط سيكون باسلوب جميل يعتمد بالاساس على html و css طبعا اضافة.
جمال الحزازي
Split Post - Split Article Into Several Pages اضافة قائمة ترقيم مخصصة لبلوجر

السلام عليكم ورحمة الله وبركاته

مرحباً! ايها الصواني.

صِوان محور الأبعاد الثلاث XYZ

انا جمال ارحب بك بحرارة واتمنى ان تحصل على معلومات مفيدة من المحتوى الذي اقدمه . لطلب اي اضافة معينة يمكنك طرح فكرتك و ساقوم بدمج فكرتك على شكل تصميم يتناسب و المحتوى العربي ليتماشى مع ذوقك و متطلباتك.


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

معاينة في صِوان unPlug

ما الذي سنحتاجه لاضافة نمط الترقيم المخصص لسمة العرض؟

ربما انت قلق على سرعة موقعك! لترتاح من هذه المسألة ساخبرك ان معظم الاضافات و الادوات التي اقدمها احاول الابتعاد على قدر الامكان على اي اكواد من الممكن ان نسبب بعض البطئ فالتحميل لموقعك اخص بالذكر الابتعاد عن اكواد جاڤاسكريبت التي تحتاج موضع الدمج بين وسمي الغلق و الفتح في راس الهيكل للموقع اقصد ما يسمى بالـ (head).

ماهي الوسوم المستعملة لضبط عرض قائمة الترقيم المخصصة لبلوچر؟

ساستعمل وسمي الفتع و الغلق <ol> وسم الهدف <li> لضبط العرض المتتالي . كما ساخصص شكلين مختلفين لعرض ترقيم بدمج الوان و سمة لشكل الرقم باستعمال لغة css، الشكل الاول سيكون تحت اسم كلاس .Style2 الشكل الثاني سيكون تحت اسم كلاس .Style1 الاول سيعتمد شكل دائري بدون حواف و الشكل الثاني سأميزه بحافة جانبية كالقرن من جهة اليمين.

مهم!
قبل أن نبدأ في إضافة الأكواد xml ، أوصيك بإلحاح بأخذ نسخة احتياطية لقالبك الحالي. من الممكن قد تحتاجها في حالة حدوث أي مشكلة ، ستتمكن من استعادتها لاحقًا.

المشاركات ذات الصلة
  1. الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة تحكم بلوچر.
  2. الخطوة 2: في لوحة التحكم بلوچر انقر على المظهر.
  3. الخطوة 3: انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
  4. الخطوة 4: انقر فوق تحرير HTML ، ستتم إعادة توجيهك إلى صفحة التحرير.
  5. الخطوة 5: ابحث الآن عن الكود ]]></b:skin> من الممكن ان تتحلل لهكذا ]]>< /b:skin> او /*]]>*/</style> والصق أكواد CSS التالية فوقها مباشرةً.
  6. ان كنت تستعمل الوضع الغامق نظرا لأن لكل قالب صيغة خاصة للوضع المظلم تأكد من تعديل الصيغة من كلاس .drK الى صيغة كلاس الوضع الغامق الخاص بقالبك

    
    /*شكل الترقيم - elhizazi*/
    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)}
    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. الخطوة 6: احفظ التغييرات بالنقر فوق هذا الرمز
  8. في هذه المرحلة ستحتاج لصق اكواد الترقيم html في مشاركة جديدة او صفحة جديد لذلك يمكنك وضع الاكواد فقط في وضع HTML و لا يمكنك اضافتها و تخصيصها في وضع الانشاء و الكتابة لهذا ستقوم بتطبيق ما سأذكره في الخطة 7

  9. الخطوة 7: توجه الى المشاركات وقم بإنشاء مشاركة جديدة او توجه الصفحات و انشئ صفحة جديدة تم غير من وضع الانشاء المشار اليه بايقونة الى وضع الترميز <html> المشار اليه بايقونة في داخل وقم باستعمال الترميز التالي
  10. الفرق بين الصفحات والمشاركات هو: الصفحات تكون ثابتة اما المشاركات تكون تفاعلية مع المقالات و الارشيف اذا كنت تريد اضافة الترقيم لمقال معين سيجب عليك اضافت الرموز في مشاركة جديدة اما اذا كنت تريد انشاء صفحة تابثة توجه الى الصفحات و الصق الرموز و قم بتخصيص كل رمز حسب رغبتك.

    <!--[النمط الاول]-->
    <ol class="style1">
    <li>هنا تكتب الخطوة 1</li>
    <li>هنا تكتب الخطوة 2</li>
    </ol>
    <!--[النمط الثاني]-->
    <ol class="style2">
    <li>هنا تكتب الخطوة 1</li>
    <li>هنا تكتب الخطوة 2</li>
    </ol>
    
    

اختر الشكل الاول او الشكل الثاني او هما معاً لا ضرر في ذلك على حسب حاجتك و رغبتك

  • الخطوة 8: انقر على نشر و عاين الصفحة ستجد شكل الترقيم تغير من الشكل العادي الى الشكل المخصص.
  • شكل الترقيم العادي يتم عرضه بدون تخصيص اما الشكل المخصص لقائمة الترقيم تظهر بشكل انيق و مميز.

    تعديل الكود

    نسخت الكود ستحتاج لتطبيق محرر النصوص احترافي انصحك بتطبيق QuickEditor+ هو الانسب ان كنت تستعمل الهاتف اندرويد سيناسب حاجتك لبعض التعديلات البسيطة على الكود فقط تغير الاشياء التي تظهر مميزة في صندوق الأكواد مثلا رقم الهاتف لزر الواتساب ادرج رقمك الخاص.

    شروط الاستخدام

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


    لتقدير أعمال جمال الحزازي ، ضع في اعتبارك الاحتفاظ بالاعتمادات في الرموز التي ستستخدمها.

    استنتاج

    هذا كل ما يتعلق بكيفية اضافة اداة ازرار متابعة حسابات التواصل الاجتماعي. أتمنى أن تستمتع بهذه المقالة. يرجى مشاركة هذه المقالة. وإذا كنت تواجه مشكلة في أي قسم أو كان لديك أي سؤال ، فاسألنا في مربع التعليقات.

    المصدر:
    Siwane©
    بتصريف من elhizazi

    عن المؤلف

    جمال الحزازي
    مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
    اشتري لي كوب قهوة ☕

    تعليق واحد

    1. جمال الحزازي
      جمال الحزازي
      🇲🇦🇲🇦🇲🇦
    اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
    "لا يقال قف لاراك بل تكلم لأعرفك"