جوجل بلس

تابعنا على الفيسبوك

ترتيب ألكسا

كيفية تغيير خط مدونتك على بلوجر إلى خطوط أكثر جمالية و وضوح


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

كيفية تغيير خط مدونتك على بلوجر إلى خطوط أكثر جمالية و وضوح


تقدم جوجل عددا من الخطوط المميزة التي يمكن استعمالها في صفحات الويب مباشرة بنسخ و لصق أكواد CSS .
تختار منها ماتشاء لمدونتك على بلوجر .
الخطوط هي :
خط Amiri

خط Amiri








خط Droid Arabic Kufi
(الخط المستعمل في مدونة مدون بلوجر )

خط Droid Arabic Kufi


خط Droid Arabic Naskh

خط Droid Arabic Naskh

خط Scheherazade

خط Scheherazade


لإستعمال خط Amiri في مدونتك , قم بنسخ هذا الكود :

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

لإستعمال خط Droid Arabic Kufi في مدونتك , قم بنسخ هذا الكود :

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

لإستعمال خط Droid Arabic Naskh  في مدونتك , قم بنسخ هذا الكود :

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

لإستعمال خط Scheherazade في مدونتك , قم بنسخ هذا الكود :

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


توجه نحو لوجة التحكم الخاصة بك على بلوجر , توجه نحو قالبك على أساس التعديل عليه , و من ثم اضغط على CTRL+F
و اكتب

</head>

قبله مباشرة , قم بإضافة كود من تلك الأكواد الخاصة بالخطوط التي تريد إستعمالها .

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

font-family: 'Amiri', serif;

font-family: 'Droid Arabic Kufi', serif;

font-family: 'Droid Arabic Naskh', serif;

font-family: 'Scheherazade', serif;


كيفية تغيير خط مدونتك على بلوجر إلى خطوط أكثر جمالية و وضوح



في كود ال css الخاص بك , توجه نحو ال body , بعد الضغط على CTRL+F :
body{

داخلها أضف font-family: 'Droid Arabic Kufi', serif; مثلا , و هو كود الخط الكوفي .

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

إقرأ أيضا :

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

  1. انا اول معرلق على ما اضن المهم هو اني اشكرك لانه هادي المدونة نفعتني ككثييييييير ارجوك واصل فهناك متبعين كثير مثلي بس في صمت

    ردحذف
  2. solayman saadi10

    أشكرك على تعليق و ان شاء الله تستفيد اكثر و اكثر :)
    لا تنس تشاركنا دائما بعتليقاتك و مشاركة المقالات , فهي اكبر دافع للمواصلة ^_^

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

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

      حذف
  4. أخي الكريم ، قمت بتطبيق ما هو مكتوب ولم يتغير الخط !!
    فأين تكمن المشكلة ؟
    تحياتي

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

      تسعدني تعليقاتكم و تفاعلكم <3 :)

      حذف
  5. الردود
    1. العفو حبيبي
      تسعدني تعليقاتكم و تفاعلكم :) <3

      حذف
  6. بعد إذن صاحب المدونة الكريم
    هناك خطأ بسيط ولا يعتبر خطأ
    علامة التنصميم الموجودة حول الخط الأول تعطي خطأ
    الكود الصحيح : font-family: Droid Arabic Kufi, serif;
    أزل علامتي التنصيص في كل الاكواد واختر الخط الذي يعجبك
    #شكراً جزيلاً لصاحب المدونة فقط بحثت كثيراً حتي وجدت هذا الدرس الوافي
    تقبلوا مروري وأرجو أن تطلوا علي في ساحتي البسيطة التي سأطلقها قريباً ( مواضيع مفيدة ) ولكنها ليست متعلقة بالبلوجر
    http://mahmoudwrite.blogspot.com/

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

      علامتي التنصيص لا تأثر بتاتا هنا
      يمكنك الدخول هنا و سترى كيف أن الخط شغال سواء بعلامتي التنصيص ام لا

      http://codepen.io/anon/pen/LVwGdX

      منتظر إبداعك إن شاء الله في موقعك الجديد و سأكون من متابعي المدونة بإذن الله :)

      في أمان الله ..

      حذف
  7. كيفية تصميم الصفحة الخاصة بالتدوينة ةتعير لون الخط وتغير الخط

    ردحذف
  8. تسلم
    هذا رابط مدونتي - فن الربح : http://profit-tech.blogspot.com
    و رابط صفحتها على فيس بوك : https://www.facebook.com/Profit.techniques?ref=hl

    ردحذف
  9. أشكرك أخي لقد تم التجريب علي مدونتي
    http://www.techmidan.com

    ردحذف
  10. ما هو اسم الخط الخاص بك اخي
    www.de-ps.blogspot.com

    ردحذف

حول المدونة

مدون بلوجر مدونة عربية تقنية هدفها الأول إغناء المحتوى العربي و إيصال المعلومة و نشرها بين العرب
لتصبح مدون محترف في بلوجر في مقالات و فيديوهات مصورة
تم تأسيسها سنة 2014 من إيهاب المالكي لتهتم بكل ما يمكن أن يحتاجه المدونون , المبرمجون و المصممون . .
دروس بلوجر , قوالب بلوجر , إضافات بلوجر .. و المزيد على مدون بلوجر ! ^^
تصميم : إيهاب المالكي جميع الحقوق محفوظة مدون بلوجر - إتصل بنا - إتفاقية الإستخدام - سياسة الخصوصية