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


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

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

    و هذا للترقيم :
    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. اللون الأحمر هو إسم الخط  و يمكنك تغييره.
    mohcene dz
    @مرسلة بواسطة
    كاتب ومحرر اخبار اعمل في موقع النجم الذهبي .

    إرسال تعليق