إضافة تغيير شكل الترقيم داخل المشاركات في مدونات بلوجر

خيار التعداد الرقمي من أهم تنسيقات صندوق كتابة المواضيع في بلوجر فهو يميز

النقاط الهامة ويرتبه فهو يحسن من مظهر المقالة ويزيد من جذب إنتباه القارئ

إضافة تغيير شكل الترقيم داخل المشاركات في مدونات بلوجر

فسوف أضيف لكم بالتدوينه أكثر من تنسيق أختار ما يعجبك ويكون مظهره متناسق

مع مدونتك والاكواد تضاف فوق الوسم ]]></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;
}

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

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

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

.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: #FA8022;
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;
}

التنسيق الرابع :

.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 */
}

التنسيق الخامس :

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em 3.4em .4em .8em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
right: 6px;
top: 50%;
margin-top: -1em;
background: #bada55;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
right: 31px;
margin-top: -0.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 11px solid transparent;
border-right: 8px solid #bada55;
}

التنسيق السادس :

.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:#9D0000;
 border-radius: 50px;
 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;
}

التنسيق السابع :

.post 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);
}
.post 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{
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:#9D0000;
 border-radius: 50px;
 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;
}

التنسيق التاسع :

.post ol {
 margin: 0px 2em 0px 12px;
counter-reset:li;list-style:none outside none;font:15px arial;padding:0;margin-right:-4px;margin-top:0;margin-bottom:0}
.post ol li{list-style:none outside none;font:15px arial}
.post ol li {
 position: relative;
 display: block;border: solid 1px #E0E0E0;
 padding: 0.4em 1.8em 0.4em 2em;
 margin: 0.5em 0px;
 background: #F0F0F0;
 color: #444;
 text-decoration: none;
 border-radius: 0.3em;
 transition: all 0.3s ease-out 0s;
 font-family:arial;
}
.post ol li:before {
 content: counter(li, decimal);
 counter-increment: li;
 position: absolute;
 right: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: 0.3em solid #FFF;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all 0.3s ease-out 0s;
 color: #fff !important;
 font-family: time;background:#359BED;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
 -moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
 box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
}
.post ol li:hover:before{transform:rotate(360deg)}
.post ol li:hover {
background:#359BED;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
color: #FFF !important;
}

كريزي كود - Crazy Code

إضافة تغيير شكل الترقيم داخل المشاركات في مدونات بلوجر