تنسيق التعداد الرقمي داخل مواضيع مدونتك بلوجر

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

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

اكواد التنسيقات تضاف فوق الوسم :

1. ]]>

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

.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 ان يصبح مستديراً تماماً

===============

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

.post ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */ padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); font-weight: bold; } .post ol li{ position: relative; display: block; padding: .4em 3.4em .4em 4em; margin: 0.5em 0; text-decoration: none; border-radius: 0.3em; transition: all .3s ease-out; } .post ol li:hover:before{ transform: rotate(360deg); } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; right: 7px; margin-top: -1.3em; height: 2em; width: 2em; line-height: 2em; color: #fff; background: #F44336; border: .2em solid #fff; -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }

يمكنك تغيير اللون الاحمر #F44336 لأي لون تريده

================

آلتنسيق الرابع و الاخير :

.post ol{ counter-reset:li; list-style: none; *list-style: decimal; margin-left:0; padding-left:0 } .post ol li{ position: relative; margin: 0 0 20px 15px !important; padding: 8px 5px 5px 10px !important; list-style: none; border-bottom: 1px solid #9A9F9A; background: #AFC33F; text-indent: -2px; color: #FFF; } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute; top: -6px; left: -10px; font-family: 'Oswald', serif; font-size: 21px; width: 20px; margin: 0 0 10px 0; padding: 4px !important; color: #FFFFFF; text-align: right; background: #92A36C; text-indent: 6px; } .post ol li:after{ content:""; position:absolute; top:-5px; left:17px; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */ } 

لطلب أي مساعدة أو أي لون تريده فقط أترك تعليق و سأحل لك المشكلة و السلام عليكم و رحمة الله تعالى و بركاته

المصدر مدونة خربشات