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

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

ابراهيم زكاغ

8/25/2015

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

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

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 مع شرح طريقة تطبيقها.

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



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

بلوجر

ابراهيم زكاغ 8/25/2015