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

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

بعد انشاء المدونة، بعض المدونين لا يعجبهم شكل المدونة. لذلك، سنرى كيفية تغيير خط المدونة على بلوجر

تغيير خط المدونة يرتبط بالشكل  والجانب التزييني لأن البعد الجمالي يلعب دورا مهما في تسهيل تصفحها والإطلاع على محتواها. ويمكن لأي مدون بلوجر أن يتحكم في خطوط مدونته عبر الخطوات التالية:
  1. اختيار نوع الخط
  2. الحصول على كود الخط
  3. فتح اداة تغيير قالب المدونة
  4. اضافة كود الخط وتغيير العناصر التي يراد أن تظهر بهذا الخط

إليكم الطريقة مع شرح بالفيديو في نهاية الدرس:

خطوط بلوجر المتاحة

خط Tahoma : 

ويستعمل غالبا للنصوص مثل نص المشاركات



تغيير خط مدونة بلوجر بخطوط جميلة
خط Tahoma

خط Droid Arabic kufi: 

الخط العربي الكوفي يكون مناسبا للعناوين أو النصوص (حالة الهواتف)

الخط العربي الكوفي
الخط العربي الكوفي

خط ge_ss_threeregular:

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


كيف يتم التحكم في الخط عن طريق الCSS

قبل المرور ل، دعونا نرى أولى كيف يبدو كود الCSS الخاص بالتحكم في نصوص الكتابة.
إسم_الجزء {
هنا كود ال CSS
}

فمثلا نريد تغيير نوع الخط الخاص بعنوان h1 فالشكل سيكون على هذا النحو:

h1 {

font-family: أسماء الخطوط;

}

بين المعقوفتين نضيف إسم الخط ك Arial مثلا  أمام font-family :
h1 {

font-family: Arial;

}

إذا أردنا استعمال أكثر من خط واحد نفصل بين الخطوط بفواصل:

h1 {

font-family: Arial , Tahoma;

}

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

 وللقيام بذلك هناك خطوتان:

1  - اضافة كود الخط
قوموا بفتح أداة تغيير القالب ثم تحرير HTML

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

* Droid Arabic Kufi (Arabic) https://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}


لإستعمال الخط العربي الكوفي أضيفوه أمام font-family  لما تريدون تطبيقه عليه:
.post h1 {
color: #0575CE;
font-family: 'Droid Arabic Kufi';
font-size: 21px;
}
بالنسبة للخط ge_ss_threeregular

 من لوحة المفاتيح Ctrl+F  للبحث عن  </head> ومن فوقه مباشرة أضيفو الكود التالي:

<link href="https://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.dfcss" rel="stylesheet">

لإستعمال هذا الخط أضيفوه أمام font-family  لما تريدون تطبيقه عليه:
.post h1 {
color: #0575CE;
font-family: 'ge_ss_threeregular';
font-size: 21px;
}

الاستعمال أعلاه تم للعناوين h1

لإستعمال خط Tahoma مثلا قوموا بتغيير كود ال CSS بهذا الشكل:

.post h1 {
color: #0575CE;
font-family: Tahoma;
font-size: 21px;
}

تغيير الخط بالكامل

لتبديل الخط بشكل كاملا، يكفي زيادة هذه القاعدة لكود القالب:

لنفترض أنك تريد تطبيق خط العربي الكوفي، قاعدة css التي سيتم اضافتها ستكون:

*{
font-family: 'Droid Arabic Kufi';
}

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

أكثر من 16 خط من خطوط جوجل Google Fonts مع شرح طريقة تطبيقها.

الدرس بالفيديو لمن يجد بعض الصعوبة في تطبيق الدرس:



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

هناك 4 تعليقات

  1. أخي طبقت ال قولت عليه ولم تنفع معي

    ردحذف
    الردود
    1. اخي لقد قمت بشرحالطريقةبالفيديو
      ساحاول نشر فيديواخرقريبا

      حذف
  2. السلام عليكم، لدي مشكلة في الخطوط لمدونتي بلوجر التي هي كالتالي: www.pause10.com
    في البداية كنت قد خصصت جميع الخطوط بنوع خط "lalezar".
    حينما ربطتها بدومين مدفوع، تغيرت جميع الخطوط.
    أخي الكريم ما هو سبب تلك التغييرات؟ وما هو حلها؟

    ردحذف
    الردود
    1. أنا وضعت خط cahnga في body وهو يتحكم في خط المدونة كلها

      حذف

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله