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

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

الشكل الأول :

إبحث عن ]]></b:skin>
أضف الكود التالي فوقه :

/* CSS3 ordered list libya-web.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;
}

الشكل التاني :

إبحث عن ]]></b:skin>

أضف الكود التالي فوقه :

/* -- 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/AVvXsEhNFivneTTvTzb1J6RpGG9IAV9qDyNCSo9BAL90-52K70FAN1EL9mklImt-Ju_zL4gJsbXjvk2H7zcQEu_fNmJyUuj2PaaCGi0n_ZlfJ92D99TOIWXi5oxh239SLPY59UIIbKf6i6PbN4eV/s1600/mudwnpv.png") no-repeat scroll 0 center      transparent;
height: 390px;
padding-top: 57px;
width: 500px;
text-align:center;
margin:0 auto;
}

الشكل الثالت :

إبحث عن ]]></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;
}

الشكل الرابع :

إبحث عن ]]></b:skin>

أضف الكود التالي فوقه :

.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;
}