تنسيق مظهر التعداد على التدوينة

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

التركيب؟

1. المظهر 
2. تحرير أو تعديل HTML
3. قبل وسم الإغلاق SKIN ألصق الكود التالي

/* CSS PostStyle by https://www.alphatekania.com/*/ .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;}

شاهد الفيديو

#صف

*

تخصيص التعداد

*

450KB

*

-

*

غوغل دريف

مركز الخليج