10 فبراير 2015

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

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

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

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

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


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

/* 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;
}

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


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

/* -- 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;
}

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


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

.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 - سي إس إس يمكنك تنسيق العداد الرقمي بأشكال اكثر احترافية بالتوفيق

مواضيع ذات صلة
تنسيق التعداد الرقمي في بلوجر باشكال احترافية
4 / 5
بواسطة

هناك 17 تعليقًا :

  1. الشكرلله يا غالي
    شكرا لمرورك =r

    ردحذف
  2. لو سمحت يا اخي كيف استخم هذه الخاصية في المواضيع ؟ انا عملت مثل ما في الشرح لكن ما عرفت كيف اضع الارقام فالموضوعات

    ردحذف
    الردود
    1. اهلا اخي طريقة استخدامها تقوم مثلا بكتابة جمل بشكل عامودي ثم نت شريط الادوات فوق التي تقوم بالتحكم بحجم الخط ... إلخ
      يوجد خطوط بجانبها ارقام قم بتحديد الكلمة التي تريدها بعدها اضغط على ايقونة الارقام
      هذه صورتها

      http://2.bp.blogspot.com/-UquPzcdUP70/VIMAlHIVoqI/AAAAAAAAFKU/vrGRxQ2o3pw/s1600/ol.png

      حذف
  3. لا شكر على واجب يا غالي
    انرت المدونة بتعليقك =r

    ردحذف
  4. اخي عندما اضغط على الايقونة يظهر لي رقم 1 فقط ماهو الحل

    ردحذف
  5. اهلا اخي الكريم
    يجب تحديد الكتابة كلها
    بعدها الضغط على ايقونة الترقيم

    ردحذف
  6. شكرا على الموضوع الرائع r=

    ردحذف
  7. لا شكر على واجب يا غالي
    مرورك الرائع =r

    ردحذف
  8. الخط فيها ضعيف

    ردحذف
    الردود
    1. صديقي انت قم بتغيير الخط

      حذف
    2. قم بتغيير Droid Arabic Kufi
      باسم الخط الموجود في مدونتك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r