من افضل و اهم تنسيقات صندوق كتابة المواضيع في بلوجر هو التعداد الرقمي
لأنه يمكنك تمييز النقاط المهمة و ترتيبها بشكل جيد و في بعض من قوالب بلوجر يأتي تنسيق التعداد الرقمي في بلوجر بشكل غير مميز ولكن مع بعض الخبرة في سي إس إس - CSS يمكننا إعطائه تنسيق مميز يحسن مظهره و يزيد من جذبه للقارئ لذلك سوف اقوم بطرح اكثر من تنسيق و طريقة تلوينهم و تضاف اكواد التنسيقات فوق الوسم
/* CSS3 ordered list www.pro-wb.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/AVvXsEijRiZzd4zlztJhfkOwBD7EVtJDVMuTpfLXtThq1yHYhlRQTKB-LmEpr9zG38IK2flJyyuwrOs9JqjjUsT8kpDoBfNgsXUXMBIPJIs87XCgP_ZWdLJEkvwq9mA_uB5Cy4agquAxpXWtoQr5/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;
}
ol ol {
margin: 0px 2em 0px 12px;
}
ol{counter-reset:li;list-style:none outside none;font:15px alhurraregular;padding:0;margin-right:-4px;margin-top:0;margin-bottom:0}
ol{list-style:none outside none;font:15px alhurraregular}
.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:alhurraregular;
font-size: 11px;
}
.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;
}
1 تعليقات:
test
الابتسامات