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

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

 ]]></b:skin>

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

/* 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/AVvXsEgbbgqOcuZPDgGRahgNFicMPLW-I35OUdfbguExXJz6NeKLOGZkHs7aQ-E6AXNgxMtPer38YI9kVQs-187z4L_7lguanF3QMZcnsQBUBCygV-ko8bAlLQy1msokYCgLav6lRbV53mOcFsDe/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 - سي إس إس يمكنك تنسيق العداد الرقمي بأشكال اكثر احترافية بالتوفيق

2/10/2015

مواضيع ذات صلة

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

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

4 / 5

بواسطة مدون محترف

مدون محترف 2/10/2015 16 تعليقات