تنسيق التعداد الرقمي في بلوجر باشكال احترافية

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

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

]]>

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

/* CSS3 ordered list www.mudwnp.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/AVvXsEiGxTByicf0XZoT-XA04BnbwrZ75dewV19O2dzgxZQS7m4qbd9Z6FJPrYvRZLvtslHsDRgXFig4yg749rBHQFecod-VzvhvIz1MLucx5YEr9OIKo6Bzlt6_UWy9qAYY-4GszuK_B-4JEC0F/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;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2;
background:#f2f2f2;
text-indent:14px;
}
.post ol li:before {
background:#E2E2E2;
color: #A5A5A5;
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 #aeaeae transparent ; /* color of the triangle behind */
border-style: solid;
border-width: 5px 5px 0 0;
content: "";
height: 0;
position: absolute;
right: 17px;
top: -5px;
width: 0;
}

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

Unknown

اضف تعليق

دروس بلوجر

الثلاثاء، 10 فبراير 2015

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

تنسيق التعداد الرقمي في بلوجر باشكال احترافية

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

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

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

عن الكاتب مدون محترف

مقالات قد تهمك