اكبر مجموعة تنسيق رقمى 1 , 2 , 3

جمعت لكم مجموعة من التنسيقات الرقمية لبلوجر ( 1 , 2 , 3 ) التى تكسب الموضوع شكل جمالى وهو يعد من أهم تنسيقات صندوق الكتابة فى المدونات فهول يعمل على تمييز النقاط الهامة ويرتبها ولكن التعداد الرقمى الموجود فى البلوجر يظهر بدون تنسيق مميز وموضوعنا اليوم سوف يعطى له تنسيق مميز يحسن من المظهر العام للموضوع ويزيد من جذب انتباه الزائر وسوف اطرح لكم مجموعة من التنسيقات التى يمكنكم الاختيار الافضل من بينها ووضعه فى مدونتك

الشرح

نتوجه الى : لوحة تحكم بلوجر >>>> قالب >>>>> تحرير html
اكواد التنسيقات تضاف فوق الوسم ]]></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;
}

هذا #0062c4 هو اللون الأزرق عدله باللون المناسب ان اردت .

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

الكود :

.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;
}

هذا #0062c4 هو اللون الازرق استبدله بكود اللون الذى تريده ان اردت
أما الرقم 2 هو درجة الإستدارة قوم بزيادته ان اردت ويمكنك بجعله 50 ان يصبح مستديراً تماماً

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

الكود :

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

التنسيق السادس :

الكود :

.post ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */ padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); font-weight: bold; } .post ol li{ position: relative; display: block; padding: .4em 3.4em .4em 4em; margin: 0.5em 0; text-decoration: none; border-radius: 0.3em; transition: all .3s ease-out; } .post ol li:hover:before{ transform: rotate(360deg); } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; right: 7px; margin-top: -1.3em; height: 2em; width: 2em; line-height: 2em; color: #fff; background: #F44336; border: .2em solid #fff; -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }

يمكنك تغيير اللون #F44336 لأي لون تريده

التنسيق السابع :

الكود :

البداية ( احدث الشروحات الحصرية )

اخر الأخبار

اعلان

اعلان

11‏/01‏/2017

اكبر مجموعة تنسيق رقمى 1 , 2 , 3

ليست هناك تعليقات:

إرسال تعليق

اعلان

تعريف الكاتب

عشوائية

الشائعة

التعليقات

مشاركة مميزة

راديو اون سبورت

الأقسام

الأرشيف

المتابعون

الصفحات

الكاتب

تابعونا على

نموذج الاتصال

التسميات

البداية ( احدث الشروحات الحصرية )

اخر الأخبار

اعلان

اعلان

11‏/01‏/2017

اكبر مجموعة تنسيق رقمى 1 , 2 , 3

ليست هناك تعليقات:

إرسال تعليق

اعلان

تعريف الكاتب

قائمة الروابط

فيسبوك

تابعونا على

عشوائية

الشائعة

التعليقات

مشاركة مميزة

راديو اون سبورت

الأقسام

الأرشيف

المتابعون

الصفحات

الكاتب

تابعونا على

نموذج الاتصال

التسميات