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

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

التنسيق الأول

/* CSS3 ordered list www.pro-bk.blogspot.com */
ol {
  counter-reset:li;
  list-style: none;
  font:15px 'Droid Arabic Kufi', 'Oswald';
  padding:0;
  margin-bottom:4em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
  margin: 0 0 0 2em;
}
.post ol li{
  position:relative;
  display:block;
  padding:.4em .8em .4em .4em;
  margin:.5em 2.5em .5em 0;
  background:#F5F5F5;
  color:#666;
  text-decoration:none;
  transition:all .3s ease-out;
}
.post ol li:hover{
  background:#EEEEEE;
}
.post ol li:before{
  content:counter(li);
  counter-increment:li;
  position:absolute;
  right:-2.5em;
  top:50%;
  margin-top:-1em;
  background:#FA8072;
  color:#FEFEFE;
  height:2em;
  width:2em;
  line-height:2em;
  font-weight:bold;
  text-align: center;
}
.post ol li:after{
  position:absolute;
  content:'';
  border: .5em solid transparent;
  right:-1em;
  top:50%;
  margin-top:-.5em;
  transition:all .3s ease-out;
}
.post ol li:hover:after{
  right:-.5em;
  border-right-color:#FA8072;
}
.post ol li span{
  position:relative;
  display:block;
  padding:5px 8px;
  margin-bottom:10px;
  background:#fafafa;
  color:#666;
  text-decoration:none;
  transition:all .3s ease-out;
}
.post ol li span:hover{
  background:#f9f9f9;
}

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

/* -- Post Ol Custom -- */
.post ul{list-style:inherit;}
ol {
counter-reset:li;
list-style:none;
font-size:14px;
font-family:droid arabic kufi,hacen_saudi_arabiaregular;
padding:0;
margin-bottom:1em;
}
ol ol {margin:0 2em 0 0;}
.post ol li{
position:relative;
display:block;padding:0;
margin:.5em 2.5em .5em 0;
background:transparent;
color:#5E6066;text-decoration:none;
transition:all .3s ease-out;
}
.post ol li:hover{color:#E74C3C;}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
right:-2.5em;top:50%;
margin-top:-1em;
background:#F3F3F3;
color:#545457;
height:2.3em;
width:2em;
line-height:2em;
text-align:center;
font-weight:bold;
border:1px solid #DDD;
font-family:Electrolize,hacen_saudi_arabiaregular;
transition:all .3s ease-out;
}
.post ol li:hover:before{
background:#F3F3F3;
color:#DB2F2F;
border:1px solid #DDD;
}
.post ol li:after{
position:absolute;
content:'';
border: .4em solid transparent;
right:-.4em;
top:52%;
margin-top:-.4em;
transition:all .3s ease-out;
}
.post ol li:hover:after{right:-.4em;border-right-color:#EC4848;}
.post ol li span{
position:relative;
display:block;
padding:4px 8px;
margin-bottom:10px;
background:transparent;
color:#b0b1b8;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li span:hover{color:#fff;}
dl{margin:.5em 3em .5em 0em}
ol{list-style:decimal outside}
dt{font-weight:bold}
dd{margin:0 2em .5em 0}
/* Video */
.mudwnpv {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqPHrerp-pqcOwAXeN83wzvy_jk2MBT8CXT92kLNXK2GAKkvHYiR1LUmiUwYtRaeMdHuiRj4o9Pv9eAyhKO2EfG7re9gFF9C-WjDQN_TiAfqyhpgGycnR3Mq3Rg3J7sZ8Xr7SR0OP4V5O/s1600/mudwnpv.png") no-repeat scroll 0 center      transparent;
height: 390px;
padding-top: 57px;
width: 500px;
text-align:center;
margin:0 auto;
}

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

.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;
color: white;
list-style: none;
box-shadow: -7px 7px 5px 1px #A0A0A0;
background: rgba(210, 36, 36, 0.7);
text-indent: 14px;
}
.post ol li:before {
background: #3F3E3E;
color: #FFFFFF;
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 #575555 transparent;
border-style: solid;
border-width: 5px 5px 0 0;
content: "";
height: 0;
position: absolute;
right: 17px;
top: -5px;
width: 0;
}

مع القليل من الخبرة في لغة برمجة CSS - سي إس إس يمكنك تنسيق العداد الرقمي بأشكال اكثر احترافية بالتوفيق

اي استفسار صعه في تعليق  

في أمان الله