تغيير شكل القوائم المرقمة داخل المشاركات - ثلاثة اشكال لمدونات بلوجر

مقدمة عن الموضوع :

السلام عليكم ورحمة الله ..
اهلا بكم زوارنا الكرام فى موضوع جديد وهو تغيير شكل الترقيم الى 3 اشكال رائعة واحترافية داخل الموضوع ومن لا يعرف الترقيم .. فهى خاصية فى بلوجر تمكنك من انشاء قائمة عناوين او اسماء او او وترقيمهم اما بالنقط او الارقام ، شاهد المثال التالى لتتعرف اكثر .

1. هذا مثال لعنوان تكتبه انت او اى شئ اخر
2. هذا مثال لعنوان تكتبه انت او اى شئ اخر
3. هذا مثال لعنوان تكتبه انت او اى شئ اخر

تابع الشرح التالى لتتعرف على طريقة التركيب :)

جميع الاكواد التالية توضع فى مكان الاستايل css
بعد تحرير القالب تضغط على ctrl+f وابحث عن :

]]></b:skin>

ثم ضع قبله (فوقه) الكود الخاص بالشكل الذى يعجبك وهذه اكواد الاشكال :

الشكل الاول

الكود الخاص به :

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

اختر الشكل الذى يعجبك ثم الصق الكود الخاص به قبل ]]></b:skin>

عند كتابتك لموضوع اضغط على الرمز التالى بعد تحديد النصوص المراد ترقيمها :

وبالاخير اتمنى لكم الاستفادة ولا تنسى ان تشارك الموضوع لتعم الفائدة :)