تنسيق شكل عناوين بلوجر

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

عنوان فرعي

عنوان ثانوي

ما رأيك هل اعجبك ^_^

لا تقلق ستحصل على شكل عنوان يتناسب مع مدونتك 

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

واذهب للوسم ]]></b:skin> وضع الكود التالي فوقه 

.post h2 {
background: #0085FA;background: -moz-linear-gradient(top,#46B3F9 ,#0085FA);background: -webkit-linear-gradient(top,#46B3F9,#0085FA);
    color: #ffffff;
    font-size: 19px;
    font-weight: bold;
    padding:4px;
    border-right:5px solid #035FAF;
    border-left:5px solid #035FAF;
border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;
box-shadow: 0 1px 3px #999;
}

.post h4 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoO6tSxorPm2nQm3tUuRGSUbEEm_kKUCpp7bANJFbqvLaOOxwqfhNoTgfip7P7x4X1krC1ghZTto_QkYfE2F4ygt0F4w04yzVpCz30-vxehzwvq4XlW_9vbo6PDLPKfN35y7kMMyNtn2O/s16/sah-icon.png") no-repeat scroll right center transparent;
    color: #000;
    font-size: 17px;
    font-weight: bold;
    padding-right:25px;
text-shadow: 0 2px 2px #000;
}

ملاحظة قد يكون الكود موجود أساسا بمدونتك فإبحث عنه ثم إستبدله بالكود السابق بدلا من أن تضيفه فالتكرار لن يجعل النتيجة مضبوطه
ملاحظة أخرى هناك بعض القوالب يكون الأمر بها متغير ويتم إستخدام العنوان الرئيسي كعنوان للتدوينة
هنا ستقوم بتغيير h2 الى h3
هذا هو الشكل الناتج من الكود

 إن كان لا يتناسب مع اللوان مدونتك يمكنك تنسيقه كالتالي

هاذين اللونين #0085FA ,#46B3F9 هما تدرج لوني الخاص بالعنوان قم بإستبدالهم 

هذا اللون     color: #ffffff; خاص بلون الخط 

والرقم 19 هو حجم الخط

أما هذا اللون #035FAF  والمتكرر لمرتين هو لون الجزئين الجانبيين في العنوان

الرابط الذي باللون الأحمر هو رابط صورة علامة صح في العنوان الثانوي

ونفس الشئ في حجم الخط 17 ولون الخط #000

ولو لديك خبره أكبر في أكواد CSS ستستطيع تنسيقة بشكل أفضل 

بالتوفيق بإذن الله

منشورة في: دروس