الأحد، 3 مارس 2013

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

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


عنوان فرعي

عنوان ثانوي

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

واذهب للوسم ]]> وضع الكود التالي فوقه 

.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/AVvXsEjlrbmQwp61I0sDXB9DGW9LWb0XDc03vH7pC0pNstLZameCnXEZmFBaMmaLTOfmvCe66NFT-oxEvOvWqsRFT2fxO2tNmxLFX7oK8wKhn1dmRIAHYkpRjxb80XniGdagm_UKyPiW9E5HFWz9/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 ستستطيع تنسيقة بشكل أفضل 
بالتوفيق بإذن الله

ليست هناك تعليقات:

إرسال تعليق