-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

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

تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية
السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا مجددا على مدونتكم العربي ويب
 في تدوينة اليوم سنتعرف على كيفية تنسيق التعداد الرقمي داخل التدوينة بــ 4 أشكال إحترافية بخطوات بسيطة
التعداد الرقمي الإفترادي يكون شكله بسيط ولا ييثير إنتباه الزوار لكن عند تنسيقه سيصبح أكثر إحترافية ويزيد من جمالية مدونتك ويجذب أعين الزائر مما يجعله يتفاعل مع محتوى مدونتك

لمشاهدة عرض توضيحي

  1.  تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية
  2.  تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية
  3.  تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية
  4.  تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية
  5.  تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية

خطوات تنسيق التعداد الرقمى فى مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير Html >>


3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
]]></b:skin>
6 - أضف فوقه الشكل الذي يناسبك من أكواد Css التالية
الشكل الأول
كود Css
/* CSS PostStyle by el3araby-web*/ .post ul{list-style:inherit}.post ol{counter-reset:li; list-style: none;*list-style: decimal;margin-top:6px;padding-left:0} .post ol li{position:relative;margin:0 0 8px 15px !important;padding:4px 30px 8px 5px !important;list-style:none; *list-style: decimal;background: rgba(245, 245, 245, 1); /* background color of each element */ border:1px solid #EBEBEB;text-indent:14px;} .post ol li:before{content: counter(li); counter-increment: li; position: absolute; right: 5px; width: 20px; margin: 0 0 10px 0; padding: 4px !important; color: #fff; background: #446FAA; text-indent: 6px; -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); border-radius: 2px;} .post ol li:after{content: ''; border: 10px solid transparent; border-left-color: #446FAA; float: left; margin-top: 3px;} .post ol li:hover:after {margin-left: 5px;border-left-color: #446FAA;transition: all 0.3s ease-out;}
الشكل الثاني
كود Css
/* CSS ol li */ .widget .post-body ol li { line-height: 1.8 !important; font-size: 14px; position: relative; display: block; padding: .4em 1.75em .4em 2em; margin: 0.3em -10px; background: rgba(238, 238, 238, 0.55); color: #444; -webkit-border-radius: .3em; transition: all .5s ease-out; width: 92%; } select#selectnav1 { display: none; } .widget .post-body ol li:before{ content: counter(li); counter-increment: li; position: absolute; right: -25px; top: 50%; margin-top: -1.3em; background: #2abb9b; height: 2.5em; color: #fff; width: 2.5em; line-height: 33px; border: .3em solid rgb(255, 255, 255); text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .widget .post-body ol li a{ color: #444; } .widget .post-body ol li:hover:before{ -webkit-transform: rotate(720deg); -moz-box-shadow: 0 0 10px #0f3,0 0 30px #0f3,0 0 50px #0f3,0 1px 3px #000!important; color: #444; } .widget .post-body ol li:hover{ background: #eee; color: #444; } .widget .post-body ol{ counter-reset:li; list-style:none outside none; font-size:15px; padding:0; margin-right:20px; margin-top:0; margin-bottom:0 } .widget .post-body ol{ list-style:none outside none; font-size:15px; } .btn-btn2 { display: table; margin: 0 auto; }
الشكل التالث
كود Css
/* CSS PostStyle by el3araby*/
 .post ul{list-style:inherit}
.post ol{counter-reset:li;list-style:none;*list-style:decimal;margin-top:6px;padding-left:0}
.post ol li{position:relative;margin:0 0 8px 15px!important;padding:4px 30px 8px 5px!important;list-style:none;*list-style:decimal;background:rgba(245,245,245,1);/* background color of each element */
 border:1px solid #EBEBEB;text-indent:14px}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;right:5px;width:24px;padding:1.5px;margin:0 0 10px 0;padding 4px!important;color:#fff;background:#2abb9b;text-indent:9px;-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);border-radius:15px}
.post ol li:after{content:'';border:10px solid transparent;border-left-color:#2abb9b;float:left;margin-top:3px}
.post ol li:hover:after{margin-left:5px;border-left-color:#2abb9b;transition:all 0.3s ease-out}}
.post h4{border-right:5px solid #243750;padding:10px 15px;background:#f2f2f2;margin:10px 0;border-radius:5px}
.post h2{background:url("http://findicons.com/files/icons/138/toolbar/16/save.png") no-repeat scroll right center transparent;color:#243750;font-size:18px;font-weight:900;padding-right:25px;text-shadow 0 2px 2px rgba(0,0,0,0.34)}
الشكل الرابع
كود Css
/* CSS3 by el3araby-web.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 تعليق على موضوع : تنسيق التعداد الرقمي فى بلوجر بــ 4 أشكال احترافية

  • اضافة تعليق
  • أزال أحد مشرفي المدونة هذا التعليق.

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


    الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

    إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>