بسم الله الرحمن الرحيم ,
اقدم لكم ايوم شرح طريقة اضافة خطوط عربية جذابة مثل التى بمدونتى
وسوف اقدك لكم هذا الموضوع بناءً على طلب بعض الزوار ,
الخطوط المستخدمة فى مدونات بلوجر التقليدية هى خطوط ليست جميلة وليست جاذبة للزوار , لذلك يجب ابتكار طريقة ما لوضع خطوط عربية لتظهر المدونة بشكل جميل وجذاب , وانا قد احضرت لكم بعض خطوط بلوجر التقليدية لتشاهدوا الفرق بأنفسكم :
خط tahoma
خط ARIAL
خط traditional arabic
خط Verdana
خط Times
كما رأيتم انها خطوط تقليدية وغير جذابة .
كما ترون مدونتى بها خطوط جميلة تودُّون لو انها بمدوناتكم وهذه امثلة لها ::
هو من افضل الخطوط واشهرها على شبكة الانترنت وكثير من المواقع الضخمة تعمل به ! ,
وهذا مثال له :
لا اله الا الله محمداً رسول الله
كود الخط
مثال :
لا اله الا الله محمداً رسول الله
كود الخط
مثال :
لا اله الا الله محمداً رسول الله
كود الخط
مثال :
لا اله الا الله محمداً رسول الله
كود الخط
قد يقابل الكثير مننا صعوبة فى تركيب الخطوط على بلوجر ولكن سأشرح طريقة سهلة لتركيبها :
اولا ادخل على لوحة تحكم بلوجر ثم قالب ثم تحرير html
وابحث عن هذا الكود بإستخدام Ctrl+f
ولتغيير لون الخط ما عليك الا بتغيير اسم الخط سواءً كان Arial او Tahoma او غيرها الى اسم الخط ....
حيث انك تبحث عن
Font-family:Arial
فإذا اردت تغيير خط المدونة بالكامل
ابحث عن فى القالب عن هذا الوسم :
font-family:DroidKufi-bold;
وقم بتغيير ما باللون الاحمر بالخط الذى تريده من مجموعة الخطوط التى فى الاعلى
وتقوم بتغيير ما باللون الاحمر بأسم الخط المراد اظهاره
واى استفسار ضعه فى تعليق ^__^
اقدم لكم ايوم شرح طريقة اضافة خطوط عربية جذابة مثل التى بمدونتى
وسوف اقدك لكم هذا الموضوع بناءً على طلب بعض الزوار ,
ما هى خطوط بلوجر
الخطوط المستخدمة فى مدونات بلوجر التقليدية هى خطوط ليست جميلة وليست جاذبة للزوار , لذلك يجب ابتكار طريقة ما لوضع خطوط عربية لتظهر المدونة بشكل جميل وجذاب , وانا قد احضرت لكم بعض خطوط بلوجر التقليدية لتشاهدوا الفرق بأنفسكم :
خط 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');
}
حيث انك تبحث عن
Font-family:Arial
فإذا اردت تغيير خط المدونة بالكامل
ابحث عن فى القالب عن هذا الوسم :
وضع هذا الوسم تحته :body{
font-family:DroidKufi-bold;
وقم بتغيير ما باللون الاحمر بالخط الذى تريده من مجموعة الخطوط التى فى الاعلى
وتقوم بتغيير ما باللون الاحمر بأسم الخط المراد اظهاره
واى استفسار ضعه فى تعليق ^__^
21 التعليقات:
لا أعرف لمادا لايوجد أي تعليق أخي الكريم مع ان هده الإضافة تبقى أجمل وأروع إضافات البلوجر والله أشكرك ألف شكر على هده الإضافة المميزة من شخص مميز مثلك
والله كنت أبحث كثيرا عن كيفيو إضافة الخطوط وخاصة هدا الخط الجميل شكرا وشكرا وشكرا مليون مرة اخي الكريم
الله يبارك فيك اخى
شكرا يا اخ شريف , محتاجيين منك قسم لقوالب لوجر بنفس مزاق مدونتك , ونفس نوع الفونت يبقا جزاك الله كل خير عنا
كيف اضع قوالب ولا يوجد عربى واحد يحترم حقوق التصميم , وابسط مثال هو انت يا admin حذف حقوق مدونتي من اضافات مدونتك :)
،ممنوع النقل بدون تصريح أو ذكر للمصدر < وسورى يا صحبى مره تانية :(
يا اخ شريف بستسمحك والله انا لسه جديد فى بلوجر ومحتاج مساعدتك , انا عايز اعرب قالب بلوجر وتنظمهولى .. خدمه لاخوك :)
لو ممكن أخي الكريم شرح عمل زر
Add to Blogger
الخاص بالمبتدئين
اخي admin
والله يا اخى لا املك الوقت لذلك , انا اكاد اضيف موضوع واحد شهرياً
اخى اسامة
سيتم شرح الطريقة بإذن الله الليلة :) بشرح مفصل
أشكرك أخي شريف لن انسى معروفك ولن أحذف رابط حقوق مدونتك منه
أشكرك اخي لكن لاتتعب نفسك عرفت كود عمل مثل ذلك الزر
ةإذا أرذت أخذ شيء من مدوتي فطبعا يمكنك لكم لاتنسى إسمي فقط والتعليق اخي الكريم إن أعجبتك أحد مواضيعي
لابأس اخى أسامة :)
سوف اضع الموضوع ايضا لان كثيرا من المدونين يحتاجونه
آه معاك حق بس لو ممكن تضع مواضيع كثير لأن من مدة ومازلت لم تضع موضوعا واحدا
نحن ننتظر جديدك اخي الكريم :)
أخي ممكن كيفية عمل خطوط ضبابية كما في مدونتك
اخي عز الدين , لا افهم قصدك ممكن توضيح :)
اعني يوجد ظل في الخطوط، هل من الممكن كيفية اضافة ذلك الظل على الخط
يمكنك ذلك عن طريق الــ CSS
بهذه الخاصية
text-shadow:1px 1px 1px;
مع امكانية التحكم فيه عن طريق عدد البكسل px
السلام عليكم، عذرا سيدي الكريم أنا مبتدئ في مجال المدونات، لا أدري لماذا لا تنجح معي إضافة الخطوط العربية رغم أنني أطبق ما ذكرته بالأعلى، لكن لا نتيجة، أتمنى أن تتفضل بشرح الطريقة بالتفصيل إذا كان هناك تفصيل غائب، وشكرا جزيلا مسبقا
الطريقة مفصلة :) ارسلى رابط مدونتك وسوف ارد عليك بالخطأ الذى فعلته :)
بارك الله فيك أخي الكريم
وجزاك الله عن الإسلام والمسلمين خيرا
بارك الله فيك على الموضوع
شكرا جزيلا
يمنع وضع اى روابط للمدونات والمواقع والا سيتم حذفها
إرسال تعليق