بسم الله الرحمن الرحيم
تنسيق التعداد الرقمى فى بلوجر مع اكثر من شكلمن أهم تنسيقات صندوق كتابة المواضيع في بلوجر هو خيار التعداد الرقمي
فهو يميز النقاط الهامة ويرتبها لكن هذا الخيار بدون تنسيق مميز في بلوجر
لكن يمكن اعطائه تنسيق مميز يحسن من مظهره ويزيد من جذبه لإنتباه القارئ
سيتم طرح تنسيقين اساسيين وطريقة تلوينهما بحسب رغبتك اكواد التنسيقات تضاف
فوق الوسم ]]></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;
}
أما هذا الرقم 2 هو درجة الإستدارة زده بقدر ما تشاء ويمكنك بجعله 50 ان يصبح مستديراً تماماً
التنسيق الثالث
 |
.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;}
الشكل الرابع
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 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/AVvXsEj2296AEsGgFS-rx1OeMd2bLxk75Q2o4lyZiP6vaUWEKy3Md0U10WbijwDW95bnuGiWP36aNtKN5DR_QbO9qS59CCnk8AP50uhKSoFw1-osg9s4MXLchABEwkcP8BbCaNfhTwzyL6affEgJ/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 arial;padding:0;margin-right:-4px;margin-top:0;margin-bottom:0}
ol{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;
}
مع استبدال الملون بالازرق "#359BED" باللون الذى تريد
والملون بالاحمر "arial" بالخط الموجود فى مدونتك
كلمة شكر تكفى
هذة الاكواد مجمعة من مصادرعديدة تم تجميعها للافادة مع جزيل الشكر لعارضى الاداه
0 التعليقات:
إرسال تعليق