مساحة إعلانية

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

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

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

عناوين بلوجر إضافات أساسية في صندوق كتابة المواضيع ولكن كثير من المدونين لا يستخدمونها ولم يفكر حتى في تجربتها أو قد يكون جربها لكن لم يرى نتيجة مرضية والسبب انها ليست منسقة ويجب تنسيقها يدوياً لذا سنقوم بعمل تنسيقات مميزة عليها وعندما تعتاد على  إستخدامها ستشعر بالفرق في شكل وجودة مواضيعك وسنذكر في البداية معلومات بسيطة كتعريف بتلك العناوين
الوسوم الخاصة بالعناوين
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://lh6.googleusercontent.com/-cI_uj9QiJdM/UPHMj9S18WI/AAAAAAAAAF0/8PYiikitO6s/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 ستستطيع تنسيقة بشكل أفضل 
بالتوفيق بإذن الله

هناك 31 تعليقًا:

  1. شكراااااااااااااااااااااااااااااااااااااا جميلة ورائعة

    ردحذف
  2. الشكر لله أخي الحبيب
    سعدت بمرورك العطر

    ردحذف
  3. كيف أضيف تلك العلامة الخضراء ؟

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

    ردحذف
  5. السلام عليكم ورحمة الله وبركاته
    بارك الله فيك اخي
    وجزاك عنا خيرا
    وتقبل الله منا ومنك صالح الاعمال

    ردحذف
  6. اخويا عمرو الحمد لله عملتها بنجاح
    وبيجى معايا المربع الازرق للعنوان الفرعى
    بس علامة الصح مش عايزة تيجى معايا فى العنوان الثانوى وانا فعلا كنت محتاجها
    ملحوظة انا عملتها h4 عندى

    ردحذف
    الردود
    1. أخي تاكد انك نسخت الكود بشكل مضبوط فلو سقطت نقطة لا يعمل
      وأيضا تأكد من عدم وجود كود آخر في قالبك يحمل الوسم .post h4
      فهذا يسبب تعارض غير ذلك الله أعلم قد يكون القالب به مشكلة
      بالنسبة لموضوع الخط معذرة التعليق حذف بالخطأ
      السبب في عدم ظهور الخط لديك أنك تغير الخ وأنت تكتب الموضوع لا يجب ان تغير الخط عند كتابة المواضيع وتاكد من تغيير أى وسم يحمل font-family بوسم الخط الذي إخترته ويجب ان تعدل كل المواضيع التي قمت بتعديل الخط بها والغاء التنسيق حتى يظهر الخط الذي إخترته

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

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

      حذف
  8. مشكووور أخي الموضوع جميل جداً لدي سؤال: كيف أجعل أعلانات حسوب تظهر داخل ايطار من أختياري كما في مدونتك

    ردحذف
    الردود
    1. <div style='background:#ddd; border:1px solid #bbb; width:468; height:60p; padding: 10px;'>
      اضف الكود هنا
      </div>

      حذف
  9. كيفية تصغير حدود حجم التنسيق للعنوان الفرعى ضرورى

    ردحذف
    الردود
    1. عذرا للتأخر في الرد أخي أحمد ما تزال لدي مشكلة في الإنترنت وانت مصري و عارف مشاكل الشركات والسنترالات =v
      هذا هو الكود اخي عدل الرقم 2 به لتخفيف الظل او احذفه ان اردت
      text-shadow: 0 2px 2px #000;

      حذف
    2. شكرا لك على الرد وفعلا النت فى مصر شى لايطاق ابدا

      حذف
  10. الحقيقة موضوع جميل وانا اصبحت اتابع مواضيع مدونتك الجميلة بإستمرار ولكن كيف اغير شكل العنوان الفرعى مثل الموجود بمدونتك بصراحة شكله احلى واكثر اناقة !

    ردحذف
    الردود
    1. اتشرف بمتابعتك استاذ مجدي بالنسبة لطلبك حول العنوان الفرعي
      فقط استبدل هذا الجزء من الكود
      .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 h2 {
      background:#0062C4;
      border: 3px dotted #FFFFFF;
      color: #FFFFFF;
      font-size: 16px;
      margin: 20px 0;
      padding: 3px 10px 6px;
      text-align: center !important;
      }

      حذف
  11. السلام عليكم
    يا أخي كيف يمكنني انشاء ايقونات للعناوين مثلك يعني بجانب الصفحة الرئيسية أضع منزل وهكذا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      الأمر لا يوجد له معيار ثابت استطيع شرحه بل يجب ان يتم بشكل مختلف مع كل عنوان يحتاج منك الامر تعلم لغة CSS

      حذف
  12. سؤال اخر من فضلك
    كيف يمكنني ان اضع مقطع صوتي واعطي خيارات اما الاستماع او التحميل

    ردحذف
    الردود
    1. لإضافة مقطع صوتي يمكنك الإستعانه بهذا المشغل
      وهو به زر تشغيل وايقاف بديل لخيار الإستماع
      http://cnmu.blogspot.com/2014/03/MP3-Player.html
      اما التحميل يمكنك اضافة رابط عادي لتحميلا لمادة ان كان موقع الرفع يعطيك رابط تحميل او ترفع المادة على موقع رفع عادي

      حذف
  13. جزاك الله خيرا .. طريقة حذف التظليل اريد نفس المعاينة الاولى بدون تظليل الكلمة

    ردحذف
    الردود
    1. هذا هو كود التظليل احذفه
      text-shadow: 0 2px 2px #000;

      حذف
  14. اخي قمت بوضع الكود ولم يحدث تغيير وقمت باستبادال h2 بـ h3 ولم يحدث تغيير ولا يوجد كود مثله في القالب

    ردحذف
  15. شكرا اخي نجحت الاضافة أخيرا
    جزاك الله كل خير

    ردحذف
    الردود
    1. وجزاك الله بالمثل وبالتوفيق

      حذف
  16. طب عندي سؤال صغير واتمني انك تجاوبني علية
    دلوقتي القالب بتاعي واخد عنوان التدوينة h1,h2,h3
    وطبعا انا واخد h4 عنوان ثانوي ب دلوقتي عايز اخلي عنوان التدوينة h1 بس اعمل اي ؟

    ردحذف
    الردود
    1. راجع هذا الموضوع أخي الكريم
      http://cnmu.blogspot.com/2014/08/headline-Tag.html

      حذف
  17. السلام عليكم
    لدي مشكل في تغيير حجم خط العنوان الثانوي حاولت تغيير 17 الى رقم اخر لكن بدون جدوى ارجو المساعدة

    ردحذف
    الردود
    1. وعليكم السلام
      ربما يكون الموضوع الذي تعاينه الخط فيه متغير داخليا او ان لديك اكواد في القالب تحجب التغيير

      حذف
  18. السلام عليكم لو سمحت يأستاذنا عندي مشكلة في صفحات بتاعت القالب ببقي كاتب في صفحة كلام كتير ولما ادخل عليها ما تظهر مش عارف ايه سبب حاولت ادخل علي ركن الأسئلة ولقيتها مغلقة زعلت جدا وحاولت اكلمك علي اي تدوينة

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

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©