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



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


قام موقع dropbox خلال الأسبوع الماضي بإلغاء خاصية تحميل ملفات .css
التي كان يعتمد عليها آلاف وملايين المستخدمين خاصة المبرمجين، للأسف إلغاء هذه الخدمة المهمة أدى لتوقف
جميع الملفات التي تحمل صيغة .css ولعل أهمها لدى المدونين خاصة هي ( خطوط الويب - web fonts )
التي تعمل على منصات بلوجر تحت وسم (@font-face)

لا شك أنك لاحظت تغير الخطوط في مدونتك أو مدونات أخرى تزورها باستمرار كانت تستخدم خطوطا مميزة
وما زاد الطين بلة أن أغلب المدونين يستخدمون خطوطا قام نفس الشخص بتحميلها على حسابه الشخصي في dropbox
باعتباره الموقع الأشهر الذي يدعم صيغة .css برابط مباشر ومجاني !

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }

عشرات ومئات المدونين يستخدمون نفس الروابط لمجموعة خطوط، ومع تعطل هذه الروابط
تشوهت مدونات وصفحات جميع هؤلاء .. خاصة أن الخطوط المستخدمة "خاصة"
وليست من دعم جوجل فلا روابط دائمة لها

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

حسنا .. نحمد الله أننا احتفظنا بالملفات الأصلية لمجموعة خطوط (GESSTwo) الجميلة ..
وسنضيف أحد النوعين من هذه الخطوط إلى قوالب مدوناتنا في خطوتين وبالاعتماد على رابط واحد فقط لكل نوع
بدل الأربعة روابط التي كانت بالكود السابق ..

 1) الخطوة الأولى:

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

 
<link href='https://cdn.staticaly.com/gh/mohammedxx/madad2/master/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
أو أضف الكود التالي الخاص بخط (GESSTwoLight) ذو البند الرفيع

<link href='https://cdn.staticaly.com/gh/mohammedxx/madad2/master/GESSTwoLight.css' rel='stylesheet' type='text/css'/>

 2) الخطوة الثانية:

ابحث عن font-family .. وهو الخاص بنوع الخطوط
ستجده يحتوي على عدة أسماء لخطوط مثل هذه:
font-family: Traditional Arabic, Tahoma, Arial, Sans-serif;
حيث أن عنوان الخط الأول (Traditional Arabic) وفي حال لم يظهر لدى المتصفح سيظهر الخط الثاني (Tahoma) وهكذا ..

ما سنقوم به الآن هو جعل عنوان الخط الأول (GESSTwoMediumRegular) أو (GESSTwoLight) ليظهر في مدونتك كخط رئيسي، وذلك بنسخ اسم الخط المحدد ولصقه كالتالي:
font-family: GESSTwoMediumRegular, Traditional Arabic, Tahoma;
font-family: GESSTwoLight, Traditional Arabic, Tahoma;

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

قم بمعاينة القالب الآن، لتجد الخطوط فيها قد أصبحت أجمل بكثير ..
احفظ التغيرات واستمتع بلمسة احترافية أضفتها الخطوط الجديدة في مدونتك



مشاركات أقدم المقال التالي
18 تعليق
  • غير معرف
    غير معرف 17‏/10‏/2014، 5:10:00 م

    8-)

  • AdMiN
    AdMiN 17‏/11‏/2014، 9:17:00 ص

    شكرا ياكبير موضوع رائع

    • مداد الجليد
      مداد الجليد 17‏/11‏/2014، 9:07:00 م

      العفو أخي الحبيب

  • Unknown
    Unknown 12‏/05‏/2015، 5:13:00 ص

    انت عبقري

    • مداد الجليد
      مداد الجليد 13‏/05‏/2015، 8:56:00 م

      شكراً لك

  • اسعد القيسي
    اسعد القيسي 14‏/05‏/2015، 4:40:00 م

    شكرااا لك اخي
    http://www.taqafa2.co.vu/

  • btmaftoh
    btmaftoh 06‏/10‏/2015، 11:40:00 م

    جزاك الله خيرا

    • مداد الجليد
      مداد الجليد 07‏/10‏/2015، 5:26:00 م

      واياك أخي شكراً لمرورك

  • Unknown
    Unknown 01‏/10‏/2016، 12:41:00 ص

    جزاكم الله خيراً على مجهوداتكم الجبارة معنا b-( طبعاً قوالب موقع "سورا تومبلاط" رائعة وزدتموها روعة عندما قمتم بتعريبها وتقديمها لنا جاهزة شكراً جزيلاً (h) ..معاينة القالب:
    http://www.maalomty.blogspot.com

    • مداد الجليد
      مداد الجليد 01‏/10‏/2016، 10:23:00 ص

      واياك اخي اتمنى لك التوفيق

  • Unknown
    Unknown 07‏/11‏/2016، 1:26:00 ص

    شكرا ^_^

    • مداد الجليد
      مداد الجليد 07‏/11‏/2016، 4:18:00 م

      العفو أحمد

  • مصطفى العراقي
    مصطفى العراقي 04‏/02‏/2017، 3:22:00 م

    مرحباً أخي الغالي محمد
    لقد قمت بتركيب وتعديل قالب على مدونتي !
    لكن اواجه مشكلة في الكلمات الذي تحتوي على رابط تظهر مخفية
    كيف اقوم بتغير لونها مثل مدونتك الخط الذي يحتوي على رابط بلون ازرق مثل بداية الموضوع هذا
    قام موقع dropbox خلال الأسبوع الماضي , كلمة drophox ظاهرة وباللون الازرق اما انا لايظهر الخط الذي يحتوي على رابط ؟

    • مداد الجليد
      مداد الجليد 04‏/02‏/2017، 4:37:00 م

      اهلا بك
      يرجى اضافة الكود التالي
      a,a:link,a:visited{color:#0088b2;text-decoration:none}
      فوق:
      ]]>
      ثم احفظ القالب

  • رضى البصير
    رضى البصير 11‏/08‏/2017، 8:35:00 م

    شكر جزيلا اخي
    بعد تركيب الخط اصبحت الارقام عربية. كيف يمكن جعلها انجليزية مع الحفاظ على نمط الخط

    • مداد الجليد
      مداد الجليد 11‏/08‏/2017، 9:38:00 م

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

  • snap: vip-s07
    snap: vip-s07 09‏/12‏/2019، 9:35:00 ص

    شكراً لك، ووفقك الله ورعاك..

    • مداد الجليد
      مداد الجليد 09‏/12‏/2019، 4:20:00 م

      العفو اخي ووفقنا الله واياكم

أضف تعليق
عنوان التعليق