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

كيفية تغيير الخطوط الى خطوط عربية جذابة لمدونات بلوجر

| | | |

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


خطوط مميزة بلوجر



ما هى خطوط بلوجر 


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

خط tahoma
خط ARIAL
خط traditional arabic
خط Verdana
 خط Times

كما رأيتم انها خطوط تقليدية وغير جذابة .

امثلة على الخطوط الحديثة الجذابة



كما ترون مدونتى بها خطوط جميلة تودُّون لو انها بمدوناتكم وهذه امثلة لها ::

خط Droid Kufi Bold


هو من افضل الخطوط واشهرها على شبكة الانترنت وكثير من المواقع الضخمة تعمل به ! ,
وهذا مثال له :
لا اله الا الله محمداً رسول الله
كود الخط

خط Droid Kufi Regular

وهو نفس الخط السابق ولكنه ارفع قليلا منه
مثال :
لا اله الا الله محمداً رسول الله
كود الخط

خط Droid Naskh Bold

من اجمل الخطوط العربية
 مثال :
لا اله الا الله محمداً رسول الله 
كود الخط

خط Droid Naskh Regular

وهو نفس الخط السابق ولكنه ارفع قليلا منه ,
مثال :
لا اله الا الله محمداً رسول الله
كود الخط

طريقة تركيب الخطوط المميزة على بلوجر


قد يقابل الكثير مننا صعوبة فى تركيب الخطوط على بلوجر ولكن سأشرح طريقة سهلة لتركيبها :
اولا ادخل على لوحة تحكم بلوجر ثم قالب ثم تحرير html
وابحث عن هذا الكود بإستخدام Ctrl+f
]]></b:skin>
وضع قبله كود الخط الذى تريده :

خط DroidKufi-bold

@font-face {
  font-family: 'DroidKufi-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}

خط DroidKufi-Regular

@font-face {
  font-family: 'DroidKufi-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}

خط DroidNaskh-bold


@font-face {
  font-family: 'DroidNaskh-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype');
}

خط DroidNaskh-Regular


@font-face {
  font-family: 'DroidNaskh-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype');
}
ولتغيير لون الخط ما عليك الا بتغيير اسم الخط سواءً كان Arial او Tahoma او غيرها الى اسم الخط ....
حيث انك تبحث عن
Font-family:Arial

فإذا اردت تغيير خط المدونة بالكامل
ابحث عن فى القالب عن هذا الوسم :
body{
وضع هذا الوسم تحته :
font-family:DroidKufi-bold;

وقم بتغيير ما باللون الاحمر بالخط الذى تريده من مجموعة الخطوط التى فى الاعلى
وتقوم بتغيير ما باللون الاحمر بأسم الخط المراد اظهاره
واى استفسار ضعه فى تعليق ^__^

21 التعليقات:

Unknown يقول...

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

sherif يقول...

الله يبارك فيك اخى

Admin يقول...

شكرا يا اخ شريف , محتاجيين منك قسم لقوالب لوجر بنفس مزاق مدونتك , ونفس نوع الفونت يبقا جزاك الله كل خير عنا

sherif يقول...

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

Admin يقول...

،ممنوع النقل بدون تصريح أو ذكر للمصدر < وسورى يا صحبى مره تانية :(

Admin يقول...

يا اخ شريف بستسمحك والله انا لسه جديد فى بلوجر ومحتاج مساعدتك , انا عايز اعرب قالب بلوجر وتنظمهولى .. خدمه لاخوك :)

Unknown يقول...

لو ممكن أخي الكريم شرح عمل زر

Add to Blogger

الخاص بالمبتدئين

sherif يقول...

اخي admin
والله يا اخى لا املك الوقت لذلك , انا اكاد اضيف موضوع واحد شهرياً

اخى اسامة
سيتم شرح الطريقة بإذن الله الليلة :) بشرح مفصل

Unknown يقول...

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

Unknown يقول...

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

sherif يقول...

لابأس اخى أسامة :)


سوف اضع الموضوع ايضا لان كثيرا من المدونين يحتاجونه

Unknown يقول...

آه معاك حق بس لو ممكن تضع مواضيع كثير لأن من مدة ومازلت لم تضع موضوعا واحدا
نحن ننتظر جديدك اخي الكريم :)

Unknown يقول...

أخي ممكن كيفية عمل خطوط ضبابية كما في مدونتك

sherif يقول...

اخي عز الدين , لا افهم قصدك ممكن توضيح :)

Unknown يقول...

اعني يوجد ظل في الخطوط، هل من الممكن كيفية اضافة ذلك الظل على الخط

sherif يقول...

يمكنك ذلك عن طريق الــ CSS
بهذه الخاصية
text-shadow:1px 1px 1px;
مع امكانية التحكم فيه عن طريق عدد البكسل px

ميلود يقول...

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

sherif يقول...

الطريقة مفصلة :) ارسلى رابط مدونتك وسوف ارد عليك بالخطأ الذى فعلته :)

abu abdallah يقول...

بارك الله فيك أخي الكريم

وجزاك الله عن الإسلام والمسلمين خيرا

ALI B يقول...

بارك الله فيك على الموضوع

غير معرف يقول...

شكرا جزيلا

يمنع وضع اى روابط للمدونات والمواقع والا سيتم حذفها

إرسال تعليق