لغة القالب

تركيب وتنسيق الخطوط لمدونات بلوجر

Admin
الخميس, مارس 14, 2013
الخطوط تعتبر لمسة جمالية للمدونات وأحيانا تكون ضرورة في بعض المدونات خصوصا التي يتم إستخدام الكتابات فيها بشكل كبير لكن غالبية الوافدين الجدد على بلوجر يجدون صعوبة في إيجاد وتركيب الخطوط وفي هذا الموضوع سنشرح كيفة إضافة الخطوط وكيفية تنسيقها وضبطها في المدونات كل ما نحتاجه بعض التركيز


قد تأخذ المعاينة بعض الوقت حتى تظهر الخطوط وهي معلومه يجب ان نعرفها وهي ان الخطوط المضافة يتم تحميلها كملفات مفرده لذا لا تقوم بتركيب أكثر من خط حتى لا تثقل مدونتك , يجب ان نعلم ان كل خط يتكون من جزئين أساسيين الجزء الأول هو ملف الخط وهو عبارة عن كود به رابط يحوي ملفات الخط وهذا ستتم إضافته تحت الوسم <head>
الجزء الثاني وهو الوسم الخاص بتفعيل الخط وهذا ما سنستخدمه في القالب ليظهر الخط وسنتعرف اكثر في الموضوع حول طريقة الإستخدام
 أول شئ تفعله هو إختيار كود الخط الذي يعجبك وركبه تحت الوسم <head>

Amiri


الكود

<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>

وسم الخط font-family: 'Amiri';

Droid Arabic Kufi

الكود

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

وسم الخط font-family: 'Droid Arabic Kufi';

Droid Arabic Naskh

الكود

<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>

وسم الخط font-family: 'Droid Arabic Naskh';

Lateef

الكود

<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>

وسم الخط font-family: 'Lateef'; 

Scheherazade

الكود

<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>

وسم الخط font-family: 'Scheherazade';

Thabit

الكود

<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>
وسم الخط font-family: 'Thabit';
بعد ان ركبت كود الخط الذي يعجبك سنتعرف على طريقة إستخدامه وأين نضع وسم الخط
لتطبيق الخط على المدونة كلها سنبحث عن هذا الكود body سنجد بعده مباشرة هذا القوس { بعد هذا القوس او تحته
سنضيف وسم الخط إن وجدت تحت body اى وسم لخط آخر وستجده يحمل هذه الكلمة font-family قم بحذفه
طبعا لا تنسى أن تأخذ نسخة من قالبك لتجنب أى خطأ
قد تجد أن الخط يعمل مع بعض الاجزاء في القالب ومع بعض الأجزاء الأخرى لا يعمل 
والسبب يرجع الى أن الاجزاء الأخرى تم تخصيص خط آخر لها ولتعديلها يجب ان تبحث عن كل كلمة font-family وتستبدلها بوسم الخط وقد تكون بعدة صيغ فيجب ان تحدد الجزء مضبوط 
مثال
مثال font-family: Helvetica, sans-serif; يجب ان تحدد من بداية الكود حتى نهايته وهو ينتهي بهذا الرمز ;

أكواد لتنسيق الخط

حجم الخط font-size:10px; قم بزيادة الرقم لزيادة الحجم

جعل الخط سميك font-weight:bold; 

لون الخط color:#000000; غير اللون بما تحب 

وهذا مثال لكود body بالكامل أضفنا فيه الخط الأول وعدلنا السمك والحجم

body {
    background: #000;
font-family: 'Amiri';

    color: #000;
font-size:18px;
font-weight:bold;
    margin: 0;
    text-align: center;
}

أتمنى ان يكون الشرح واضح لكل من طلبه من زوارنا الكرام 
تحياتي للجميع


تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. ممتاز جدا تسلم ايدك

    ردحذف
  2. سلمك الله من كل سوء اخي جهاد
    ونورت المدونة

    ردحذف
  3. فى البدايه شكرا جزيلا لتلبيت الطلب :)
    ثانيا كل الكلام ده بالنسبالى انا عارف :)
    بس انا كنت اقصد ايه الديفات الى اعدل عليها
    مثلا عنوان الموضوع الديف بتاعه ايه وهكزا
    وشكرا مره تانيه :)

    ردحذف
  4. العنوان سيكون .post h3 وفي بعض القوالب h2
    المواضيع ستكون .post-body
    السايدبار هيكون h2
    مثال للتعديل الخط الخاص بالمواضيع
    .post-body { font-family: 'Amiri';}
    هذه هي الأوسمة الثابته في التعديل أما الباقي يكون مختلف من قالب لآخر
    وإن لم يكن هذا المطلوب رجاء توضيح أكثر

    ردحذف
    الردود
    1. تمام
      انت وصلت لما اريده لكن انا اريد بالتحديد التعديل على الخط فى هذه المنظقة فى الصورة
      http://www11.0zz0.com/2013/03/14/23/839779073.jpg
      وشكرا :)

      حذف
  5. شكرا على الرد السريع :)
    كده تمام بس سوال بسيط هل كلاس محتوى الموضوع هو هو كلاس المقتطف الى بيبقى فى الرئيسيسة بجانب الصورة ؟
    وشكرا اخى عمرو :)

    ردحذف
  6. في بعض القوالب يكون هو هو وفي قوالب اخرى يكون مختلف
    وبالنسبة لقالبي أنا قمت بتطبيق على الـbody بأكمله
    ولأن هذا الكلاس يختلف من قالب لآخر لا يمكن تحديد كلاس محدد للتطبيق عليه
    يمكنك التطبيق على الـ body بأكمله وإن كان هناك موضع تريد إستثناءه إستخدم معه وسم خط من الخطوط الأساسية كـ font-family: 'Arial';

    ردحذف
  7. السلام عليكم أخي الكريم ،،
    بانسبة لي أنا فأريد تغيير خط الكنوان من tahoma الى Droid Arabic Kufi فكيف ذلك .

    ردحذف
    الردود
    1. العنوان يكون .post h3 وبعده ستجد قوس فتح كهذا { بعد القوس
      أضف وسم خط Kufi وإن كان خط tahoma موجود فعد القوس قم بحذفه

      حذف
  8. أولا ً شكرا على الموضوع ..
    ثانياً : انت قلت ان علينا ان نبحث عن كود body لكن عندما بحثت عنه يكون هناك الكثير منه ولم أجد تحت اي واحدة كلمة font-family
    لكن عندما بحثت عنها وجدتها لكن ليس بجانب كلمة body ...

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

      حذف
  9. هذه الخطوات اللي سويتها شوف وش صار
    1- http://im33.gulfup.com/3yLsF.png
    2- http://im33.gulfup.com/7T9vD.png
    3- http://im33.gulfup.com/2NQdc.png
    4- http://im33.gulfup.com/XKgzL.png
    5- http://im33.gulfup.com/Z75ZI.png

    ردحذف
  10. أخي أنت أخطأت في الصورة رقم ثلاثه
    أنت وضعت الرابط تحت body والذي يوضع تحت body الوسم وليس الرابط ضع الرابط كما في الصورة الأولى تحت head
    أما تحت body قم بحذف font:small Georgia Serif ; وضع بدلا منه
    font-family: 'Droid Arabic Kufi';

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

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

    ردحذف
  13. لم يتغير شئ لانه قد يكون كل ققسم في القالب محدد له خط
    عليك البحث في القالب عن أكواد تحمل font-family أو font وبعد small أو normal
    أو ماشابهها وتقوم بإستبدالها بوم الخط بحيث يتم تطبيقها على القالب كله
    الامر يحتاج بعض الخبرة لتحديد بداية أكواد الخطوط ونهايتها
    فحاول بقدر ما تستطيع ودائما إحتفظ بنسخه من القالب لتجنب المشاكل
    وبالتوفيق

    ردحذف
  14. بارك الله فيك اخي على هذة الدروس المفيدة
    اخي عندي استفسار حول الخط القوائم الجانبية طلعت كبيرة جدا
    اريد ان اتحكم فيها لتكون صغيرة

    ردحذف
    الردود
    1. وفيك بارك الله
      بالنسبة لحجم الخط ستجد اكواد بإسم font-size وبجانبها أرقام
      قم بتقليل الأرقام سيتم تصغير الخط
      ملاحظة بالنسبة للقوائم الجانبية ستجد font-size تحت أكواد بإسم sidebar أو h2
      وإستخدم المعاينة لتعلم هل ما عدلته صحيح أم لا الى أن تصل للنتيجة المرضية
      بالتوفيق

      حذف
  15. جزاك الله خيراً أخي
    كيف أجعل الخط يطبق فقط على المواضيع

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

      حذف
  16. رائع جزاك الله خيرا

    ردحذف
  17. شكرا لك اخي شرح رائع ومرتب
    لكن الخط عندي ماتغير والحل ؟؟ وكمان الخط يطلع عندي صغير شوف : http://www.mukallatomorrow.co.vu

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

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

    ردحذف
    الردود
    1. غير الخط الخاص بالأرقام فالأرقام لا تعرض بالعربية الا في خطوط معينه

      حذف
  19. الف شكر لقد تم التطبيق

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

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

      حذف
  21. تحياتى لك على مدونتك الرائعة انا جديد فى عالم بلوجر وانشأت مدونة من كام يوم واخترت قالب اخبارى من القوالب على مدونتك واعجبنى القالب ...ولكن اخى احببت تغيير الخط ولكن دون جدوى طبقت الخطوات فى هذا المقال ولكن كل مرة يقول هناك خطأ ... هناك مشكلة بالنسبة لى واجدها عند اغلب من يشرحون اضافات بلوجر كل من يوضح لك كود وطريقة اضافته تجده يقول لك ابحث عن وسم Body ويتحدث عن الموضوع ببساطة واختصار ولكن حين تذهب الى مدونتك وتبحث عن الوسم فى صفحة الاكواد تتوه فى غابة من الاكواد وتجد نفس الوسم الذى اعطاه لك تجد من الكثير وتحتار ولاتعرف ايهما هو المقصود ارجو منك اخى ان توضح لى ولكل المبتدئين اذا كنت تقصد كود مثل body انا وجدت الكثير منه ولم اجد الوسم اللى هو المفروض بداية الوسم يعنى اول واحد وتقريبا هو ده اللى انت تقصده ...المهم انا لم اعرف اضيف الوسم اين ...لان كلمة body لم اجد الكلمة التى بعدها { لم اجد القوس ده بعدها وقمت باضافة الوسم بعد كلمات post body فقط ولكن لم يحدث تغيير فى اى موضوع ارجو الافادة

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

      حذف
  22. أريد تغيير خط الموضوع ، قمت بالخطوات لكن لم يتغير خط المواضيع فقط تغير نوع خط اسم الصفحات والتسميات ، ما لحل أخي ؟

    ردحذف
    الردود
    1. طالما تغير الخط إذا هناك خط آخر موضوع للمواضيع عليك البحث عنه واستبداله ابحث عن font-family في القالب وحاول تعديله بالكامل

      حذف
  23. ممتـــــــــــــــــاز كالعادة

    ردحذف
  24. أزال المؤلف هذا التعليق.

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

      حذف
  25. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. أهلا ومرحباً بك
      أخي الكريم افتح القالب بمحرر نصوص على جهازك وليس على محرر بلوجر محرر مثل notepad++
      ثم احفظ على المحرر التعديلات واعد رفع القالب كاملاً هنا سيتغير بإذن الله ويتم الحفظ
      ان لم يحدث قم بتغييرا لخط من التخصيص في لوحة التحكم ادخل على المظهر ثم تخصيص , فوالب بلوجر الرسمية تلك لا تقبل التعديلات بسهولة

      حذف
  26. أزال المؤلف هذا التعليق.

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

      حذف
  27. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. هذه النافذة معناه انه عند التغيير أحد القيم لم يكن يجب تغييره
      أعد التغيير مرة أخرى لكن غير فقط الموجوده في منطقة
      <b:skin><![CDATA[
      ان لم يعمل بعد ذلك فهذا أمر لا أستطيع الإفادة به لانه يتطلب مني عمل مباشر على القالب

      حذف
  28. السلام عيكم
    شكرا على الشرح
    سؤالي: لماذا لا يظهر خط الحاسوب كما يظهر الخط على الهاتف

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

      حذف
  29. السلام عليكم اخى انا مبتدئ ف بلوجر من حوالى شهرين او ثلاثه اعانى من مشكلة تداخل الخطوط والسطور ف بعضها البعض فى المشاركات ولم اعلم ما السبب اتمنى من حضرتك الافاده وجزاك الله خيرا

    ردحذف
  30. أنا استعمل قالب سلاش وليس به وسم head ماذا أفعل أرجو الرد

    ردحذف
    الردود
    1. لا أعرف القالب أخي الكريم لكن لا ينفع أن لا يكون موجود به وسم head فهذا الوسم أساساي في اى صفحة انرتنت يمكن فقط ان لكون مكتوب بطريقة مختلفة
      يعني بدلا من ان يكون بداخل أقواس يكون بداخل رموز كهذه &lt
      فابحث عن الكلمة نفسها head وليس الرمز كامل

      حذف
  31. السلام عليكم، لدي مشكلة في الخطوط لمدونتي بلوجر التي هي كالتالي: www.pause10.com
    في البداية كنت قد خصصت جميع الخطوط بنوع خط "lalezar".
    حينما ربطتها بدومين مدفوع، تغيرت جميع الخطوط.
    أخي الكريم ما هو سبب تلك التغييرات؟ وما هو حلها؟

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أخي ما تزال خطوط مدونتك على الخط lalezar
      فلا اعرف ما المشكلة لديك الخط بالفعل يعمل عندك
      ان كان الخط شكله تغير في مرحلة معينة ربما من موقع الخط نفسه الرابط المرفوع عليه الخط

      حذف

عدد المواضيع