»نشرت فى : السبت، 6 ديسمبر 2014»بواسطة : »ليست هناك تعليقات

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

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

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

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

    اضف تعليقاً عبر:

  • blogger
  • disqus

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

design by : bloggerinarab, powered by : blogger
كافة الحقوق محفوظة لمدونة عالم المدون 2014 - 2015