تركيب وتنسيق الخطوط لمدونات بلوجر
الخطوط تعتبر لمسة جمالية للمدونات وأحيانا تكون ضرورة في بعض المدونات خصوصا التي يتم إستخدام الكتابات فيها بشكل كبير لكن غالبية الوافدين الجدد على بلوجر يجدون صعوبة في إيجاد وتركيب الخطوط وفي هذا الموضوع سنشرح كيفة إضافة الخطوط وكيفية تنسيقها وضبطها في المدونات كل ما نحتاجه بعض التركيز
قد تأخذ المعاينة بعض الوقت حتى تظهر الخطوط وهي معلومه يجب ان نعرفها وهي ان الخطوط المضافة يتم تحميلها كملفات مفرده لذا لا تقوم بتركيب أكثر من خط حتى لا تثقل مدونتك , يجب ان نعلم ان كل خط يتكون من جزئين أساسيين الجزء الأول هو ملف الخط وهو عبارة عن كود به رابط يحوي ملفات الخط وهذا ستتم إضافته تحت الوسم <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;
}
أتمنى ان يكون الشرح واضح لكل من طلبه من زوارنا الكرام
تحياتي للجميع
ممتاز جدا تسلم ايدك
ردحذفسلمك الله من كل سوء اخي جهاد
ردحذفونورت المدونة
فى البدايه شكرا جزيلا لتلبيت الطلب :)
ردحذفثانيا كل الكلام ده بالنسبالى انا عارف :)
بس انا كنت اقصد ايه الديفات الى اعدل عليها
مثلا عنوان الموضوع الديف بتاعه ايه وهكزا
وشكرا مره تانيه :)
العنوان سيكون .post h3 وفي بعض القوالب h2
ردحذفالمواضيع ستكون .post-body
السايدبار هيكون h2
مثال للتعديل الخط الخاص بالمواضيع
.post-body { font-family: 'Amiri';}
هذه هي الأوسمة الثابته في التعديل أما الباقي يكون مختلف من قالب لآخر
وإن لم يكن هذا المطلوب رجاء توضيح أكثر
تمام
حذفانت وصلت لما اريده لكن انا اريد بالتحديد التعديل على الخط فى هذه المنظقة فى الصورة
http://www11.0zz0.com/2013/03/14/23/839779073.jpg
وشكرا :)
شكرا على الرد السريع :)
ردحذفكده تمام بس سوال بسيط هل كلاس محتوى الموضوع هو هو كلاس المقتطف الى بيبقى فى الرئيسيسة بجانب الصورة ؟
وشكرا اخى عمرو :)
في بعض القوالب يكون هو هو وفي قوالب اخرى يكون مختلف
ردحذفوبالنسبة لقالبي أنا قمت بتطبيق على الـbody بأكمله
ولأن هذا الكلاس يختلف من قالب لآخر لا يمكن تحديد كلاس محدد للتطبيق عليه
يمكنك التطبيق على الـ body بأكمله وإن كان هناك موضع تريد إستثناءه إستخدم معه وسم خط من الخطوط الأساسية كـ font-family: 'Arial';
السلام عليكم أخي الكريم ،،
ردحذفبانسبة لي أنا فأريد تغيير خط الكنوان من tahoma الى Droid Arabic Kufi فكيف ذلك .
العنوان يكون .post h3 وبعده ستجد قوس فتح كهذا { بعد القوس
حذفأضف وسم خط Kufi وإن كان خط tahoma موجود فعد القوس قم بحذفه
أولا ً شكرا على الموضوع ..
ردحذفثانياً : انت قلت ان علينا ان نبحث عن كود body لكن عندما بحثت عنه يكون هناك الكثير منه ولم أجد تحت اي واحدة كلمة font-family
لكن عندما بحثت عنها وجدتها لكن ليس بجانب كلمة body ...
في الغالب سيكون أول أكواد body في قالبك
حذففي غالبية القوالب يكون قبله نقطه .
وسيكون مشابه للكود الأخير الموجود في الموضوع
وملاحظة ليس شرطا ان يكون تحته font-family
إن كانت تحته ستحذفها وتضيف الخاصة بالخط الذي إخترته وإن لم تكن تحته ستضيف وسم الخط الذي إخترته مباشرة
هذه الخطوات اللي سويتها شوف وش صار
ردحذف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
أخي أنت أخطأت في الصورة رقم ثلاثه
ردحذفأنت وضعت الرابط تحت body والذي يوضع تحت body الوسم وليس الرابط ضع الرابط كما في الصورة الأولى تحت head
أما تحت body قم بحذف font:small Georgia Serif ; وضع بدلا منه
font-family: 'Droid Arabic Kufi';
السلام عليكم روحمة الله تعالى وبركاته
ردحذفحياك الله وجزاك الله عنا كل خير على ما أتحفتنا به
من شروحاتك الجميل والمتناسقه
استمر أكثر حتى نستفيد منك أكثر
بارك الله فيك أخي الكريم وجعل عملك في ميزان حسناتك
وعليكم السلام ورحمة الله وبركاته
ردحذفوجزاك الله بالمثل أخي الحبيب
وكلامك كبير جدا أنا لا أستحقه
وأى توفيق هو فضل الله وحده وأى تقصير فمن نفسي ومن الشيطان
وشكرا لدعمك الدائم للمدونة دمت في امان الله
لم يتغير شئ لانه قد يكون كل ققسم في القالب محدد له خط
ردحذفعليك البحث في القالب عن أكواد تحمل font-family أو font وبعد small أو normal
أو ماشابهها وتقوم بإستبدالها بوم الخط بحيث يتم تطبيقها على القالب كله
الامر يحتاج بعض الخبرة لتحديد بداية أكواد الخطوط ونهايتها
فحاول بقدر ما تستطيع ودائما إحتفظ بنسخه من القالب لتجنب المشاكل
وبالتوفيق
بارك الله فيك اخي على هذة الدروس المفيدة
ردحذفاخي عندي استفسار حول الخط القوائم الجانبية طلعت كبيرة جدا
اريد ان اتحكم فيها لتكون صغيرة
وفيك بارك الله
حذفبالنسبة لحجم الخط ستجد اكواد بإسم font-size وبجانبها أرقام
قم بتقليل الأرقام سيتم تصغير الخط
ملاحظة بالنسبة للقوائم الجانبية ستجد font-size تحت أكواد بإسم sidebar أو h2
وإستخدم المعاينة لتعلم هل ما عدلته صحيح أم لا الى أن تصل للنتيجة المرضية
بالتوفيق
جزاك الله خيراً أخي
ردحذفكيف أجعل الخط يطبق فقط على المواضيع
وجزاك الله بالمثل اخي الكريم
حذفالحقيقة تطبيق الخط على المواضيع فقط ليس أمر ثابت يمكن شرحه بل هو عمل على القالب نفسه
فانت تحتاج لبناء ستايل مستقل للمواضيع
رائع جزاك الله خيرا
ردحذفشكرا لك اخي شرح رائع ومرتب
ردحذفلكن الخط عندي ماتغير والحل ؟؟ وكمان الخط يطلع عندي صغير شوف : http://www.mukallatomorrow.co.vu
قالبك أخي الكريم يعتمد على اضافات بالتالي يجب ان تغير كود الخط في كل اضافة وهذا امر يصعب شرحه يحتاج قليل من الخبرة والتعديل المباشر على القالب
حذفالسلام عليكم لدي مدونة اريد تحويل الارقام من العربية الى الانجليزية اي 12345.. وجزاكم الله خيرا
ردحذفغير الخط الخاص بالأرقام فالأرقام لا تعرض بالعربية الا في خطوط معينه
حذفالف شكر لقد تم التطبيق
ردحذفالسلام عليكم أخي في الحقيقة لقد قمت بوضع خط في المدونة جميل وعربي لكن المشكلة الأرقام تظهر أرقام عربية بدلا من الأجنبية مالحل رجاءا أخي وشكرا
ردحذفوعليكم السلام ورحمة الله وبركاته
حذفبعض الخطوط العربية تكون ارقامها عربية ايضاً بالتالي لو اردت تغيير الترقييم عليك تغيير الخط
او جرب التالي بعد اسم الخط الذي تستخدمه أضف
,arial
ان عملت معك وظهر الترقيم طبيعي لا مشكلة ان لم تعمل لا مفر من تغيير الخط
تحياتى لك على مدونتك الرائعة انا جديد فى عالم بلوجر وانشأت مدونة من كام يوم واخترت قالب اخبارى من القوالب على مدونتك واعجبنى القالب ...ولكن اخى احببت تغيير الخط ولكن دون جدوى طبقت الخطوات فى هذا المقال ولكن كل مرة يقول هناك خطأ ... هناك مشكلة بالنسبة لى واجدها عند اغلب من يشرحون اضافات بلوجر كل من يوضح لك كود وطريقة اضافته تجده يقول لك ابحث عن وسم Body ويتحدث عن الموضوع ببساطة واختصار ولكن حين تذهب الى مدونتك وتبحث عن الوسم فى صفحة الاكواد تتوه فى غابة من الاكواد وتجد نفس الوسم الذى اعطاه لك تجد من الكثير وتحتار ولاتعرف ايهما هو المقصود ارجو منك اخى ان توضح لى ولكل المبتدئين اذا كنت تقصد كود مثل body انا وجدت الكثير منه ولم اجد الوسم اللى هو المفروض بداية الوسم يعنى اول واحد وتقريبا هو ده اللى انت تقصده ...المهم انا لم اعرف اضيف الوسم اين ...لان كلمة body لم اجد الكلمة التى بعدها { لم اجد القوس ده بعدها وقمت باضافة الوسم بعد كلمات post body فقط ولكن لم يحدث تغيير فى اى موضوع ارجو الافادة
ردحذفاهلا بك أخي الكريم
حذفانا عندما قلت البحث عن body قلت ان بعده مباشرة ستجد هذا القوس {
ولن تجد كود body بعده القوس إلا مرة واحده فقط في القالب على الغالب حتى انني في نهائية الموضوع وضعت كود توضيحي يميز مظهره فقط ابحث عنه وملحوظة التغيير في الوسم body ليس شرط نجاح العمل فاحيانا بعضا لقوالب يجبالبحث عن الخطوط داخلها كلها وتعديلها وبالتوفيق
أريد تغيير خط الموضوع ، قمت بالخطوات لكن لم يتغير خط المواضيع فقط تغير نوع خط اسم الصفحات والتسميات ، ما لحل أخي ؟
ردحذفطالما تغير الخط إذا هناك خط آخر موضوع للمواضيع عليك البحث عنه واستبداله ابحث عن font-family في القالب وحاول تعديله بالكامل
حذفممتـــــــــــــــــاز كالعادة
ردحذفأزال المؤلف هذا التعليق.
ردحذفكما وضع تالخط السابق استبدله بنفس الطريقة
حذفان لم يتغير قم بحفظ نسخة القالب على الحاسب
ثم افتحه بأى محرر نصوص ثم غير الخط واعد تركيب القالب
فاحيانا يحدث تعليق بالمنصة لا تقبل التعديل خصوصاً القالب الذي تستخدمه فقوالب بلوجر الرسمية الجديدة لا تقبل التعديلات بسهولة
أزال المؤلف هذا التعليق.
ردحذفأهلا ومرحباً بك
حذفأخي الكريم افتح القالب بمحرر نصوص على جهازك وليس على محرر بلوجر محرر مثل notepad++
ثم احفظ على المحرر التعديلات واعد رفع القالب كاملاً هنا سيتغير بإذن الله ويتم الحفظ
ان لم يحدث قم بتغييرا لخط من التخصيص في لوحة التحكم ادخل على المظهر ثم تخصيص , فوالب بلوجر الرسمية تلك لا تقبل التعديلات بسهولة
أزال المؤلف هذا التعليق.
ردحذفهذا أمر غريب الحقيقة طالما تم حفظ الملف على جهازك وحفظ التعديلات عليه , المفترض اما أن يحفظها عند اعادة رفعه أو لا يقبل رفع القالب أصلا
حذفلكن للأسف هذه مشاكل التعديل التي تحدث مع قوالب بلوجر الرسمية حيث ان لها اعدادات افتراضية قد تعيدها المنصة تلقائياً , لو اردت قالب تستطيع التحكم به أكثر أنصحك بإستخدام قالب خارجي , وبالتوفيق
أزال المؤلف هذا التعليق.
ردحذفهذه النافذة معناه انه عند التغيير أحد القيم لم يكن يجب تغييره
حذفأعد التغيير مرة أخرى لكن غير فقط الموجوده في منطقة
<b:skin><![CDATA[
ان لم يعمل بعد ذلك فهذا أمر لا أستطيع الإفادة به لانه يتطلب مني عمل مباشر على القالب
السلام عيكم
ردحذفشكرا على الشرح
سؤالي: لماذا لا يظهر خط الحاسوب كما يظهر الخط على الهاتف
وعليكم السلام ورحمة الله وبركاته
حذفتأكد اخي ان قالب متجاوب , وان الخط الخاص بالحاسب مفعل على الهاتف فيه
كذلك استخدم متصفح مثل كروم على الهاتف ولا تعتمد على المتصفح الإفتراضي
السلام عليكم اخى انا مبتدئ ف بلوجر من حوالى شهرين او ثلاثه اعانى من مشكلة تداخل الخطوط والسطور ف بعضها البعض فى المشاركات ولم اعلم ما السبب اتمنى من حضرتك الافاده وجزاك الله خيرا
ردحذفأنا استعمل قالب سلاش وليس به وسم head ماذا أفعل أرجو الرد
ردحذفلا أعرف القالب أخي الكريم لكن لا ينفع أن لا يكون موجود به وسم head فهذا الوسم أساساي في اى صفحة انرتنت يمكن فقط ان لكون مكتوب بطريقة مختلفة
حذفيعني بدلا من ان يكون بداخل أقواس يكون بداخل رموز كهذه <
فابحث عن الكلمة نفسها head وليس الرمز كامل
السلام عليكم، لدي مشكلة في الخطوط لمدونتي بلوجر التي هي كالتالي: www.pause10.com
ردحذففي البداية كنت قد خصصت جميع الخطوط بنوع خط "lalezar".
حينما ربطتها بدومين مدفوع، تغيرت جميع الخطوط.
أخي الكريم ما هو سبب تلك التغييرات؟ وما هو حلها؟
وعليكم السلام ورحمة الله وبركاته
حذفأخي ما تزال خطوط مدونتك على الخط lalezar
فلا اعرف ما المشكلة لديك الخط بالفعل يعمل عندك
ان كان الخط شكله تغير في مرحلة معينة ربما من موقع الخط نفسه الرابط المرفوع عليه الخط