تغيير شكل الترقيم في بلوجر الي شكل احترافي

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

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

سنعرض لك شكلين مختلفة من افضل الاشكال الترقيم المصممة لتعطي المدونة مظهر انيق، يمكنك تنزيل ما تفضله منهم بضغطة زر واتباع الخطوات لمعرفة كيفية إضافتها واستخدامها في المظهر الخاص بك.

خطوات تغيير شكل الترقيم

1. قم بالدخول الى مدونته بلوجر ثم قم بالضغط على قسم المظهر ثم تعديل html
2. قم بالبحث عن الكود التالى ]]></b:skin> عن طريق الضغط على Ctrl+F من لوحه المفاتيح
3. قم بنسخ الكود الخاص بالرقية التى تريد استخدامه فى مواضيعك من الأشكال ثم قم بوضعه اعلى وسم ]]></b:skin> ثم قم بحفظ المظهر

الشكل الاول

.post-body ol li {
    padding: 8px 30px;
    margin-right: 15px;
    margin-bottom: 15px;
    list-style: none;
    -webkit-box-shadow: 0 1px 3px #ddd;
    box-shadow: 0 1px 3px #ddd;
    font-size: 17px;
    position: relative;
}
.post-body ol li:before {
    content: counter(li);
    counter-increment: ol li;
    background-color: var(--linkC);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 15px;
    color: #fff;
    border-radius: 3px;
    font-size: 17px;
    position: absolute;
    right: -15px;
}
.post-body ol {
    counter-reset: li;
    padding-right: 0;
}
.post-body ol li:after {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--linkC);
    position: absolute;
    top: 0;
    left: 0;
}
.drK .post-body li:after {
    background-color: var(--darkU);
    padding-right: 10px;
}

الشكل التاني

ملاحظة
هنا عليك اختيار الكود المناسب لمحتوى مدونتك " عربي / اجنبي " بمعنى اتجاه المدونة يمين ام يسار!

/* --- Numbered Listing --- */
ol {
    counter-reset: numbers;
    list-style: none;
    padding: 0;
}
ol > li {
    counter-increment: numbers;
    margin-bottom: 25px;
    position: relative;
    margin-right: 55px;
}
ol > li img {
    margin: 15px 0;
    width: 100%;
    display: block;
}
ol > li::before {
    content: counter(numbers);
    line-height: 23px;
    font-family: "var(--fontB)";
    font-size: 14px;
    font-weight: bold;
    right: -45px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: absolute;
    color: var(--themeC);
    border: 5px solid rgb(220 226 224);
    border-radius: 50% 0 50% 50%;
    top: -2px;
}
ol li ul li {
    margin-bottom: 15px;
}
ol li ul {
    margin-top: 15px;
}
.drK ol > li::before {
    color: var(--darkU);
    border-color: rgb(220 226 224);
}

/* --- Numbered Listing --- */
ol {
    counter-reset: numbers;
    list-style: none;
    padding: 0;
}
ol > li {
    counter-increment: numbers;
    margin-bottom: 25px;
    position: relative;
    margin-left: 55px;
}
ol > li img {
    margin: 15px 0;
    width: 100%;
    display: block;
}
ol > li::before {
    content: counter(numbers);
    line-height: 23px;
    font-family: "var(--fontB)";
    font-size: 14px;
    font-weight: bold;
    left: -45px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: absolute;
    color: var(--themeC);
    border: 5px solid rgb(220 226 224);
    border-radius: 50% 0 50% 50%;
    top: -2px;
}
ol li ul li {
    margin-bottom: 15px;
}
ol li ul {
    margin-top: 15px;
}
.drK ol > li::before {
    color: var(--darkU);
    border-color: rgb(220 226 224);
}

كود تجريبي للترقيم

يمكنك نسخ ولصق الكود هذا في منشور تجريبي للترقيم قبل الانتهاء بشكل نهائي

<ol>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

بعد تطبيق تلك الخطوات يمكنك الآن استخدام الاضافه بشكل عادى وبدون اى صعوبه بالاضافه الى انك أعطيت مواضيعك شكل مميز