عروض مركز بلوجر

تنسيق التعداد الرقمي في بلوجر

Customizing Numbered Lists in Blogger
من أهم تنسيقات صندوق كتابة المواضيع في بلوجر هو خيار التعداد الرقمي فهو يميز النقاط الهامة ويرتبها لكن هذا الخيار بدون تنسيق مميز في بلوجر لكن يمكن اعطائه تنسيق مميز يحسن من مظهره ويزيد من جذبه لإنتباه القارئ سيتم طرح تنسيقين اساسيين وطريقة تلوينهما بحسب رغبتك اكواد التنسيقات تضاف فوق الوسم ]]></b:skin>

نبدأ مع التنسيق الأول

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-right:0;
padding-right:0
}
.post ol li{
position:relative;
margin:0 15px 20px 0 !important;
padding:4px 10px 4px 5px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2;
background:#f2f2f2;
text-indent:14px;
}
.post ol li:before {
  background:#0062c4;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font: bold 14px serif;
  margin: 0 0 10px;
  padding: 5px 3px !important;
  position: absolute;
  right: -9px;
  text-align: right;
  text-indent: 6px;
  top: -5px;
  width: 20px;
}
.post ol li:after {
  border-color: transparent #0062c4 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0 0;
  content: "";
  height: 0;
  position: absolute;
  right: 17px;
  top: -5px;
  width: 0;
}
هذا #0062c4 هو اللون الأزرق عدله باللون المناسب

التنسيق الثاني

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-right:0;
padding-right:0
}
.post ol li {
  list-style: none outside none;
  margin: 0 15px 10px 0 !important;
  padding: 4px 10px 4px 5px !important;
  position: relative;
  text-indent: 14px;
}
.post ol li:before {
  background:#0062c4;
  border-radius: 2px;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font: bold 14px serif;
  margin: 0 0 10px;
  padding: 4px 4px 5px 3px !important;
  position: absolute;
  right: -9px;
  text-align: right;
  text-indent: 6px;
  width: 20px;
}
نفس الشئ هذا #0062c4 هو اللون الازرق استبدله
أما هذا الرقم 2 هو درجة الإستدارة زده بقدر ما تشاء ويمكنك بجعله 50 ان يصبح مستديراً تماماً
بالتوفيق

33تعليقات

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. إضافة مميزة من مدون مميز
    شكراً

    ردحذف
    الردود
    1. أهلا ومرحباً بك اخي الكريم سررت بمرورك =r

      حذف
  2. شكرا لك اخي عمرو صراحة اضافة جميلة
    و مهمة =r

    ردحذف
  3. شكرا افضل شىء انها تلقائية

    ردحذف
  4. تشرفت كثيراً بمروركم اخواى الكريمان
    موفقين بإذن الله
    تحياتي

    ردحذف
  5. اضافة مميزة جدا ,,, اخي عمرو هل من الممكن ان تشرح لنا طريقة تغيير شكل تعليقات بلوجر ...
    انظر عندي بالمدونة ليست جميلة ... هل من الممكن ان تساعدني لتغيير الشكل.
    http://im78.gulfup.com/dnVcpl.png

    تفضل بزيارة مدونتي للمعاينة :
    www.th3key.com

    شكرااااا عالاضافات الفريدة من نوعها

    ردحذف
    الردود
    1. أنا شرحت أحد أفضل نماذج التعليقات مسبقاً أخي الكريم ستجدها في الموضوع التالي
      http://cnmu.blogspot.com/2013/04/Blogger-Threaded-Comments.html
      استخدم التنسيق الخاص بها ولونه بحسب مظهر مدونتك
      تحياتي

      حذف
  6. الله يبارك أستاذنا الرائع تستحق كل الحب والمتابعة

    ردحذف
  7. يعطيك العافية اخي موضوع مميز مثل صاحبة

    ردحذف
  8. هل من الممكن ان توضح لي كيفية استخدمهم عند كتابة موضوع

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

      حذف
  9. اخي العزيز
    تم تركيب الاضافة بدون اخطاء 100%
    ولكن لا اعرف ماذا حدث
    شاهد الصورة
    http://store1.up-00.com/2015-02/1423062957591.png
    مع العلم :اني كل ما اركب اي تنسيق في الرسائل مثل مشاركة الموضوع و مواضيع ذات صله لا تعمل اعتقد ان المشكلة في القالب !
    فهل من حل ؟

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

      حذف
    2. اوكي مشكور اخي ^_^

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

    ردحذف
    الردود
    1. شكرا على الاضافة اخي الكريم
      لكن احيانا يا طيب عندما تكون امور بديهية انسى ذكرها
      ولهذا انتم من يذكرنا ويدعمنا دائما تحياتي لك

      حذف
  11. اخى الفاضل انا حملت قالب من احد المدونات الاجنبيه وكمت بى تعريبه ويوجد مع القالب التعدد الرقمى ولاكن لا يظهر بى شكل واضح يمكنك المعاينه http://magiccombe.blogspot.com/2015/04/blog-post_4.html
    هل يوجد حل v=

    ردحذف
    الردود
    1. وجدت الترقيم ظاهر لديك في القالب

      حذف
    2. اسف على الازعاج انا كومت بى اعاده ترقيبه من جديد وتم تشغيله %100
      واسف مره تنيا علا الازعاج u=

      حذف
  12. جزاك الله خيرا تم التركيب بنجاح
    http://www.linartaqe.com/

    ردحذف
  13. هذه طريقة لتزينها هل يوجد طريقة لاضافتها وكيف تركيبها

    ردحذف
    الردود
    1. أخي التعداد الرقمي هو جزء من صندوقا لمواضيع في بلوجر
      ابحث عن ايقونته في صندوق المواضيع انا واضح صورة الأيقونة في بداية الموضوع
      عند تحديد مجموعة اسطر والضغط على الأيقونة سيتصبح تلقائياً تعداد رقمي

      حذف
  14. السلام عليكم
    اخي عند استخدامي للتعداد الرقمي بعد تركيب الكود ظهر لي الارقام في الموضوع حتى رقم 9 فقط وانا كنت كتبت الى رقم 20 وعند المعاينة ظهر لي التعداد الى رقم 9 والباقي رقم 1 , ولا اعرف ما المشكلة

    ردحذف
  15. واظن اخي انه لا يظهر ارقام ثنائية لانه توقف عند الرقم 9 ,وعند الرقم 20 كتب 2 فقط ولم يظهر الصفر

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      لم اواجه تلك المشكلة لدي ربما يكو نالخط لديك اكبر مناستيعاب مساحة الترقيم
      فيمكنك زيادة عرض مساحة الترقيم
      بتعديل هذا الكود
      width: 20px;
      وزيادة الرقم 20 ليزداد العرض

      حذف
  16. شكراً جزيلا اخي
    قمت بزيادة العرض الى 30 بدلاً من 20 ونجحت
    جزاك الله كل خير

    ردحذف
  17. اضافه جميلة جدا جزاك الله خيرا .

    ردحذف
  18. السلام عليكم انا ركبت الاضافة بنجاح ولكن لما اقوم بتظليل مثلا اربعة سطور مع الارقام ١ ٢ ٣ ٤ لا تصلح فكل السطور تحمل نفس الرقم ١ ١ ١ ١ بدلا من ١ ٢ ٣ ٤ .
    ما الحل اخي؟

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته؟
      لم افهم قصد بالتظليل ؟ هل تقصد بزر الماوس ان كان هذا قصدك فهذا امر لا تلتف له لانه ليس من اصل العرض
      او وضح بصورة فضلا

      حذف
  19. لقد وجدت حل المشكلة ، لقد فهمت قصدي، اضافة رائعة ، هل من الممكن تقول لي كيف أضيف نفس الخط font style , لانه مختلف عن الخط اللي على مدونتي ، بارك الله فيك ان كان بإمكانك




    ردحذف
    الردود
    1. أخي هذا كود الخط عدله بما تريد
      font: bold 14px serif;
      bold السماكة يمكنك جعله normal يكون خفيف
      14 الحجم
      serif اسم الخط استبدله بإسم خطك
      اما الخط العام هو ياخذ تلقائيا خط مدونتك

      حذف
  20. من فضلك أردت أن أعرف الطريقة التي عندما أضغط على العنوان في تنسيق التعداد الرقمي أو النقطي يأخذني مباشرة إلى التفصيل.

    ردحذف
    الردود
    1. أنا فعلياً كنت شرحت هذا سابقاً في هذا المفال
      https://www.cnmu.info/2015/05/jumping-inside-pages-html.html
      المشكلة ان محرر بلوجر حالياً أصبح تلقائياً ان وجد رمز # في القالب يضيف عليه رابط لوحة التحكم فيجعل تلك الطريقة لا تعمل داخل المواضيع فقط في الأجزاء الرئيسية للقالب وليس داخل الموضوع

      حذف