- Golden-Star

The latest trending and buzz news, videos, sports, foods, culture, Makeup and more

آخر الأخبار

اعلان داخل التدوينة في الاعلى

نتمنى أن تجدو ما تبحثون

Wednesday, July 4, 2018

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


طريقة تركيب الإضافة سهلة جدا و بسيطة كل ما عليك هو متابعة الشرح بالأسفل .

هذا تأطير للعناوين :

و هذا للترقيم :
  1. نص تجريبي لتأطير الترقيم
  2. نص تجريبي لتأطير الترقيم
  3. نص تجريبي لتأطير الترقيم
  4. نص تجريبي لتأطير الترقيم

طريقة التركيب :

أولا تقوم بالدخول الى لوحة التحكم بلوجر, ثم القالب, ثم تحرير 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}

طريقة التعديل :

في حال كنت تريد التعديل على الألوان أو الخط فقم بتغيير ما يلي :

  1. اللون الأخضر هو كود اللون غيره باللون الذي يناسبك . الألون : هنا
  2. اللون الأحمر هو إسم الخط  و يمكنك تغييره.

No comments:

Post a Comment

Post Top Ad


ضع اعلانك هنا