يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

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

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

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

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

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

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

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

  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: &quot;&quot;;
    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>

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

ينتهي هنا موضوعنا عن "تغيير شكل الترقيم في بلوجر الي شكل احترافي"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

4 تعليقات

  1. تسلم ايدك
    1. شكرا على مرورك اخي.
  2. ممكن أخي سكريبت يجعل العناوين مزخرف زي تبعك وشكرا
    1. قريباً بإذن الله
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.