السلام عليكم في هذا الدرس الجديد سنشرح طريقة إضافة تأطير إحترافي للعناوين و كذلك الترقيم كما هو موضح في الصورة و هذا ما يعطي جمالية للقالب الخاص بك و للمواضيع و إن شاء الله ستكون إضافات أخرى في المستقبل القريب .
طريقة تركيب الإضافة سهلة جدا و بسيطة كل ما عليك هو متابعة الشرح بالأسفل .
طريقة تركيب الإضافة سهلة جدا و بسيطة كل ما عليك هو متابعة الشرح بالأسفل .
هذا تأطير للعناوين :
و هذا للترقيم :
- نص تجريبي لتأطير الترقيم
- نص تجريبي لتأطير الترقيم
- نص تجريبي لتأطير الترقيم
- نص تجريبي لتأطير الترقيم
طريقة التركيب :
أولا تقوم بالدخول الى لوحة التحكم بلوجر, ثم القالب, ثم تحرير Html بعد ذلك تضغط من الكيبورد على زر Ctrl + F ليظهر لك مربع البحث تم سنقوم بالبحث عن هذه الكلمة : ]]></b:skin> و تقوم بوضع الكود التالي فوقها مباشرة ..post ul{list-style:inherit}.post ol{font-family:droid arabic naskh, sans-serif;counter-reset:li;list-style:none;*list-style:decimal;margin-top:6px;padding-left:0}.post ol li{ font-family: droid arabic naskh, sans-serif;position:relative;margin:0 0 8px 15px!important;padding:6px 30px 8px 7px!important;list-style:none;background:rgba(245,245,245,0.58);text-indent:14px;box-shadow:15px 9px 7px -12px rgba(0,0,0,0.16),0 3px 6px 0 rgba(0,0,0,0.12)}.post ol li:before{font-family: droid arabic naskh;font-weight: 600;content:counter(li);counter-increment:li;position:absolute;right:5px;width:28px;padding:1.5px;margin:0 0 10px 0;padding 4px!important;color:#fff;background:linear-gradient(to bottom right,#0045a6,#0658cb)!important;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.07),inset 0 0 10px rgba(0,0,0,0.08),inset 0 0 0 1px rgba(0,0,0,0.19);border-radius:15px}.post ol li:after{content:'';border:10px solid transparent;border-left-color:#000;float:left;margin-top:3px}.post ol li:hover:after{margin-left:5px;border-left-color:#0045a6;transition:all 0.3s ease-out}/*================/* PostStyle Title================== */.post h3{border-bottom:5px solid #0045a6;padding:6px 15px;background:#eee;margin:9px 0;border-radius:3px;font-size:19px;font-family: droid arabic naskh ;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.post h4{border-right:7px solid #0045a6;border-left:7px solid #0045a6;font-family:droid arabic naskh;padding:10px 15px;background:#f7f7f7;margin:10px 0;border-radius:5px;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.rtl .post-body ul li{margin-right:40px;list-style:circle;padding-right:10px}.ltr .post-body ul li{margin-left:40px;list-style:circle;padding-left:10px}.post-body ul li:hover{list-style:disc}blockquote{margin:5px 17px;padding:7px;color:#fff;background:rgba(47, 70, 107, 1)} ul,ol,dl{list-style-position:inside;font-weight:normal;list-style:none}
طريقة التعديل :
في حال كنت تريد التعديل على الألوان أو الخط فقم بتغيير ما يلي :
- اللون الأخضر هو كود اللون غيره باللون الذي يناسبك . الألون : هنا
- اللون الأحمر هو إسم الخط و يمكنك تغييره.