تغيير شكل القوائم المرقمة داخل المواضيع

أكتوبر 08, 2017 ,

موضوعنا اليوم هو تغير شكل القوائم المرقمة داخل المواضيع باشكال جميلة
ومن لايعرف الترقيم...  فهي خاصية تمكنك من انشاء قائمة مرقمة شاهد المثال التالي


  1. 1. هذا مثال كتبته أنت أو أي شئ آخر
  2. 2. هذا مثال كتبته أنت أو أي شئ آخر
  3. 3. هذا مثال كتبته أنت أو أي شئ آخر

طريقة التركيب

جميع الاكواد التالية توضع في مكان الستايل
بعد تحرير القالب نضغط علي 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;
}
عند كتابتك لموضوع اضغط علي الزر التالي بعد تحديد النص المراد ترقيمه
 في امان الله
المصدر مدونة مساعد قوالب بلوجر
عن الموضوع
تغيير شكل القوائم المرقمة داخل المواضيع إبلاغ عن خطأ
تقييمات المشاركة : تغيير شكل القوائم المرقمة داخل المواضيع 9 على 10 مرتكز على 10 تقييمات. 9 تقييمات القراء.

أضف تعليق ،،
نتيجة بحث الصور عن لا تقرأ وترحل

ليست هناك تعليقات

الاشتراك في: تعليقات الرسالة ( Atom )