الأربعاء, فبراير 06, 2013

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

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

جربنا كثيرا كل خط من هذه الخطوط الأجنبيه حتى نجد خطا ملائما للتدوين العربى , ولكننا لم نجد أى منهم يصلح للتدوين باللغه العربيه , ولكن جوجل لم تترك المدونين العرب طويلا بدون طرحها لبعض الخطوط العربيه التى تساعدهم على تحسين وتغيير شكل محتواهم .

وجوجل تقدم لنا الآن 6 خطوط عربيه جديده وهى :
  1. Amiri
  2. Droid Arabic Kufi
  3. Droid Arabic Naskh
  4. Lateef
  5. Scheherazade
  6. Thabit
وحتى أسهل عليكم , ها هى الخطوط السته وأشكالهم فى الصور
Amiri
Droid Arabic Kufi
Droid Arabic Naskh
Lateef
Scheherazade
Thabit

والآن كيف نستخدم هذه الخطوط فى مدوناتنا على بلوجر ؟

تنقسم الخطوات إلى شقين
الشق الأول : إضافة رابط الخط
إفتح أكواد HTML الخاصه بقالب مدونتك , ثم قم بالبحث عن الكود التالى
<head>
 وضع تحته مباشرة الكود الخاص بالخط وهو كالتالى للخطوط السته على التوالى

ملحوظه : عليك بوضع السطر الخاص بالخط المطلوب فقط وليس كل الخطوط .
<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>
الشق الثانى : تعديل نوع الخط فى الجزء الذى تريد تغييره
والآن تستطيع تغيير الخط على كل أجزاء المدونه , فقط عليك معرفة كود الجزء المراد تغيير الخط فيه , وإليك شكل أكواد CSS الخاص بكل خط من الخطوط السابقه وبنفس الترتيب

ملحوظه : عليك إستخدام كود واحد من الأكواد التاليه , وإختر هذا الكود على أسس إختيارك لكود نوع الخط السابق .
font-family: 'Amiri', serif;
font-family: 'Droid Arabic Kufi', serif;
font-family: 'Droid Arabic Naskh', serif;
font-family: 'Lateef', serif;
font-family: 'Scheherazade', serif;
font-family: 'Thabit', serif;
وأخيرا يمكنكم الإستعانه بهذه الصفحه , وهى الصفحه الرئيسيه الخاصه بجوجل والتى تقدم هذه الخطوط .
من فضلك اضغظ لايك لمشاهدة لينك التحميل

30 تَعْلِيق:

  1. اريد كود الخط الذي تستخدمه عندك في مدونتك

    ردحذف
    الردود
    1. الخط الذى أستخدمه هو Droid Arabic Kufi وستجد الطريقه بالأعلى .

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

    ردحذف
  3. السلام عليكم.. أخي من فضلك الخط يعمل جيدا في google chromأما علىinternet explorer لا يعمل بشكل المطلوب!!! النقاط تظهر على شكل مربعات.
    شكرا على مجهودك

    http://salsabileparadise.blogspot.com

    ردحذف
  4. أين أجد الكود المسؤول على خط القوائم
    كما في الصورة
    أريد تغيير الخط الى Droid Arabic Kufi
    http://up.arab-x.com/May12/tpb32599.png

    ردحذف
  5. الاخ ياسر اسماعيل
    كفيت ووفيت
    إلى الامام يا دكتور

    ردحذف
  6. مشاء الله خط جميل جدا

    ردحذف
  7. طبقت الخطوات لاكن لا تنجح اليك المدونة لتعرف ما السبب http://ar-alfrsan-tv.blogspot.com/

    ردحذف
    الردود
    1. طبق الخطوات بالظبط وبدل الخط فى كل جزء من المدونه

      حذف
  8. موضوع في غاية الروعة كنت ابحث عن الخطوط وبجانبها الصور اتمني زيارة مدونة
    برنامج علي متصفح

    ردحذف
  9. اريد خط مثل هذه المدونة
    http://konozblog.blogspot.com/

    ردحذف



  10. شكرا اخي الغالي على الشرح المتقن والاحترافي


    العمل من الانترنت

    ردحذف
  11. شكرا لك تم التطبيق
    http://albnt.blogspot.com/

    ردحذف
  12. شكراا على الموضوع الرائع
    لقد تم التطبيق بنجاح على
    http://afkarpro.blogspot.com/

    ردحذف
  13. شكرا جزيلا لقد طبقت خط Droid Arabic Kufi في مدونتي http://www.noukatmar.tk

    ردحذف
  14. شكرا لك ..

    http://ec4learn.blogspot.com/

    ردحذف
  15. مشكوووور أخي .. شرح مميز وطريقتك جذابة
    http://fla4-back.blogspot.com/

    ردحذف
  16. ممكن تشرح الشق الثاني

    ردحذف
  17. عمل رائع اخي شكرا
    بالتوفيق
    زووم العربية

    ردحذف
  18. عندي في المدونه يغير العناوين ولا يغير الخط داخل المواضيع

    ردحذف
  19. للمعاينه
    http://al5odary.blogspot.com

    ردحذف
  20. ربما تكون لاتفعل الخطوات بشكل صحيح MedØ ELkhodary

    ردحذف
  21. انا عامله تمام بس مش خط المدونة كله اتغير حاجات معينة بس و انا عايز اغير خط كل حاجة و عايز كمان اغير خط كلام التدوينه زي عندك ده ازاي يعتي ايه

    علي ما اعتقد اني عايز احط font-family في class معينهة صح او ايه الحل بتاعك

    ردحذف
    الردود
    1. اخى حرر القالب font-family: وغير كل مابجانبة بالقالب

      حذف
  22. عملت كدة و لسة بردو بس ده معناه ان في كتير مفيهاش font-family و محتاجة اني اضفها

    ردحذف
    الردود
    1. اخى اعطنى القالب وانا اقوم بالازم لك

      حذف
  23. شكرا لك اخى شرفنا بزيارتك
    .....
    www.m7loma.co.vu

    ردحذف
  24. شرح رائع و مدونة اروع شكرا لقد تمت العملية بنجاح
    (قالب معرب)

    ردحذف
    الردود
    1. شكرا لك اخى نتمنى الزيارة مرة اخرى

      حذف