ترغب في إضافة بعض التأثيرات الرائعة إلى مدونتك مثل تساقط الثلوج أو الخطوط ثلاثية الأبعاد أو نصوص النيون أو الظلال المربعة أو كنت ترغب في نقل تصميم مدونتك إلى المستوى التالي ، فكل ما تحتاجه هو إدراج سطور قليلة من CSS المخصص في مدونتك. ماهو الـ CSS ؟ تُعرف CSS باسم "اختصار لـ Cascading Style Sheet" والتي تُستخدم ببساطة لوصف شكل ومظهر مدونتك أو بعبارة أخرى تُستخدم لتحديد كيفية عرض عناصر HTML. قبل أن تتعلم عن CSS ، من الأفضل أن تعرف HTML. هناك الكثير من الموارد على CSS وحتى المبتدئ يمكنه بسهولة فهم العناصر الأساسية لـ CSS ، لكن إتقانها سيستغرق الكثير من الوقت والمعرفة العملية.
يلعب CSS دورا مهما في تجميل العناصر وستحتوي جميع قوالب Blogger افتراضيا على كود CSS الخاص بها. في أي وقت إذا كنت ترغب في تحسين تصميم مدونتك ، يمكنك إضافة بعض عناصر CSS المخصصه.
معظمنا ببساطة نفتح ملفات القوالب الخاصة بهنا، ونكتتشف علامات b: skin. يسمح لك Blogger بإضافة CSS الخاص بك في مصمم القالب الذي يتجاوز رمز CSS الافتراضي لتحقيق المظهر الجذاب لمدونتك. سنبين لك هنا كيفية إدراج / إضافة CSS في Blogger.
كيفية إدراج / إضافة CSS في Blogger - فهم CSS في Blogger
قبل إضافة CSS ، يتعين عليك كتابة CSS وقبل أن تتمكن من كتابة رمز نمط CSS ، يجب عليك العثور على المحددات التي ترغب في تغيير النمط من أجلها. يمكنك الاستفادة من أدوات مطوّري برامج المتصفح لديك لفحص العنصر ، وهنا لن نوضح تفاصيل ذلك. على سبيل المثال ، تعرف علامات h1 و h2 و h3 و h4 و h5 و h6 بشكل عام ولتعديل تلك الخطوط يمكنك إضافة CSS مثل هذا أدناه.
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
font-weight: bold;
color: rgb(56, 77, 187)
}
ولكن ماذا ستفعل لتغيير تخطيط الصفحة أو نمط علامة تبويب القائمة أو الروابط أو عائلة الخطوط أو المحاذاة أو لون الخلفية أو النص عندما لا تعرف فئة العنصر. هذا هو المكان الذي يتعين عليك فيه استخدام أداة مطوري برامج التصفح لديك. ما عليك سوى النقر بزر الماوس الأيمن فوق أحد العناصر ثم النقر فوق "عنصر فحص" حيث سترى العناصر الموجودة على يسارك و CSS على يمينك. عدّل رمز CSS وشاهد كيف تبدو التغييرات ، على سبيل المثال هنا هو رمز CSS لعلامة تبويب القائمة التي ستجدها مختلفة في القالب الخاص بك.
.tabs-inner .widget li a:hover {
color: #fff;
background-color: #FF9900;
text-decoration: underline;
display: inline-block;
padding: .6em 1em;
font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
border-left: 1px solid #ffffff;
border-right: 1px solid #dddddd;
}
باستخدام أداة فحص العناصر ، يمكنك معاينة تغييرات CSS لأي عنصر وعندما تحصل على الشكل المرغوب ، امسك رمز CSS وقم بتنفيذه في مدونتك.
تعديل CSS في Blogger
هناك طريقتان لتعديل CSS في Blogger ، أحدهما عن طريق تحرير ملفات القوالب مباشرةً ، والطريقة الأخرى الأسهل هي استخدام خيار add CSS في مصمم قوالب Blogger.
تعد إضافة CSS هنا هي أسهل الطرق وأكثرها أمانًا لأنها لا تؤثر على ملفات القوالب الأساسية. بخلاف إضافة CSS مخصص ، يتيح لك مصمم قوالب Blogger تغيير خلفية مدونتك بسهولة ، وضبط العرض ، والتخطيط ، وأنماط الخطوط ، والألوان ، ومنطقة الأداة ، ومحتوى التذليل ، إلخ.
قم بتسجيل الدخول إلى مدونة Blogger ، وانتقل إلى النماذج ، ثم انقر فوق تخصيص
سترى الآن صفحة مصمم قوالب Blogger مع بعض الخيارات
انقر فوق "خيارات متقدمة" ، وقم بالتمرير العناصر الفرعية لأسفل ثم اختر "إضافة CSS".
بعد ذلك ، سترى حقلًا على الجانب الأيمن وهذا هو المكان الذي يتعين عليك فيه إضافة CSS المخصص.
أضف رمز CSS المخصص أعلاه ، راجع التغييرات أدناه وعندما ينتهي كل شيء ، انقر فوق "تطبيق على المدونة" في الأعلى.
إضافة CSS عن طريق تعديل قالب Blogger الخاص بك
الطريقة الأخرى لتطبيق CSS هي عن طريق تحرير CSS الأساسي مباشرةً أو إضافة CSS مخصص إلى ملف القالب الخاص بك. نحن لا نقترح هذه الطريقة للمبتدئين لأن الاستخدام غير السليم قد يؤدي إلى عطب في القالب الخاص بك. لذا قبل إضافة CSS باستخدام هذه الطريقة تأكد من اجراء النسخ الاحتياطي لقالبك
في لوحة معلومات Blogger ، انتقل إلى Template ، ثم انقر فوق تحرير HTML
سترى الآن رموز القالب الخاصة بك ، ما عليك سوى الضغط على CTRL + F للبحث ثم البحث عن
وسّع
ابدأ في تعديل CSS الحالي أو يمكنك إضافة CSS الخاص بك ، لكن هنا لن تحصل على خيار المعاينة الذي تحصل عليه في مصمم قوالب Blogger. وأخيرا احفظ القالب الخاص بك عند الانتهاء.
نأمل أن يوجهك هذا المقال لإضافة CSS في Blogger. ابدأ في تجميل مدونتك والحصول على المزيد من هذه التحديثات اشترك في قنوات RSS الخاصة بنا.
إرسال تعليق