كيفية تخصيص كل تسمية أو تصنيف بلون مخصص في بلوجر (التصنيفات بألوان مختلفة)
تطوير بلوجر تطوير ويب
في هذا المقال، سأشارككم ميزة أو إضافة أكثر من رائعة لمدونات بلوجر، حيث سأقدم شرح لكيفية تخصيص لون معيّن لكل تسمية أو تصنيف (كل تسمية/تصنيف له لون مختلف) في مدونات بلوجر من خلال إستخدام كود CSS فقط، لإعطاء المدونة مظهر جمالي أكثر من رآئع ومميز بإظهار التسميات أو التصنيفات بألوان مختلفة.
الطريقة و الشرح في هذا المقال سيعتمد على إستخدام كود CSS فقط ودون الحاجة لأي أكواد جافا سكربت، وهو ما سيضمن عدم التأثير على سرعة تصفح المدونة إطلاقا.
بالإمكان إستخدام هذه الميزة أو الإضافة لتخصيص (لون الخط، حجم الخط، الخلفية، نوع الخط، تأثير الرابط وغيره) لتسمية أو تصنيف مُعيّن فقط أو لعدة منها أو لجميعها.
مثال لهذه الميزة يمكنكم مشاهدة ذلك في موقع مدمن ويب في الصفحة الرئيسية، كما هو ظاهر التسميات أو التصنيفات كلا منها بلون معين يختلف عن الآخر.
هذا الشرح سيستفيد منه بالأساس أولئك أصحاب مدونات بلوجر الذين يستخدمون قوالب تسمح في عرض وإظهار التسميات أو التصنيفات في الصفحة الرئيسية وصفحات التسميات أو التصنيفات وصفحات البحث.
تنبيهلاتنسى أخذ نسخة إحتياطية للقالب قبل تطبيق هذا الدرس، كي تتمكن من إستعادة القالب في حال ظهور أي مشاكل أو أخطآء بعد تطبيق هذا الدرس.
شرح كيفية تخصيص لون كل تسمية أو تصنيف على حده
في هذا الشرح سنستخدم فقط كود CSS وهو الكود التالي والذي سنقوم بإضافته داخل كود إستايل المدونة.
a[href^="رابط التسمية أو التصنيف"] {
color:#كود_اللون;
background:#كود_اللون;
font-size: ;
font-family: ;
box-shadow: ;
border: ;
border-radius: ;
/* أي تعديلات أخرى على الإستايل يمكنك إضافتها */
}
حيث سنستخدم الكود أعلاه، لتعيين ستايل مخصص لكل رابط تسمية أو تصنيف كما سأوضح أدناه.
طريقة تركيب الإضافة
الآن إفتح بلوجر> ثم إذهب إلى المظهر (Theme) > ثم > تحرير HTML.
واضف الكود السابق داخل كود الاستايل أي قبل كود الإغلاق </style>
على سبيل المثال: لكي أقوم بتخصيص لون وخلفية إسم التصنيف أدوات وخدمات في مدونتي، قمت بإضافة الكود التالي لإستايل المدونة:
a[href^="https://www.md3bm.com/search/label/%D8%A3%D8%AF%D9%88%D8%A7%D8%AA%20%D9%88%D8%AE%D8%AF%D9%85%D8%A7%D8%AA"] {
color: #fff !important;
background: #568af5 !important;
}
بهذا نكون قد انتهينا،
ولكن في حالة كنت ترغب بأن تظهر هذه الإضافة فقط في الرئيسية وصفحات البحث أو في صفحات مخصصة أخرى فيمكنك عمل ذلك بإضافة الكود أعلاه داخل أي من دوال بلوجر الشرطية، فمثلا لو أردت أن تظهر التسميات التصنيفات بألوان مختلفة فقط في الصفحة الرئيسية وصفحات البحث، فيمكنك ذلك كما في الكود التالي، والذي في هذه الحالة ستعمل على إضافته داخل تروسية المدونة، أي قبل تاق الإغلاق للترويسة </head>
<b:if cond='data:view.isMultipleItems'>
<style>
a[href^="رابط التسمية أو التصنيف"] {
color:#كود_اللون;
background:#كود_اللون;
font-size: ;
font-family: ;
box-shadow: ;
border: ;
border-radius: ;
/* أي تعديلات أخرى على الإستايل يمكنك إضافتها */
}
</style>
</b:if>
وكل ما عليك سوى تغيير رابط التسمية أو التصنيف في الكود أعلاه وتغيير السمات كاللون والخلفية وغيره بحسب رغبتك.
الخلاصة
كان هذا شرح حصري من مدمن ويب حول كيفية تخصيص لون لكل تسمية أو تصنيف في بلوجر بدون أي سكربتات وإنما فقط من خلال كود CSS لمدونات بلوجر.
إذا واجهتك أي مشاكل أو صعوبات أو أخطآء خلال تطبيق هذا الشرح، لاتتردد بالاستفسار وطرح مشكلتك في التعليقات أسفل هذه الصفحة، وسأحرص على مساعدتك والرد عليك في أسرع وقت إن شاء الله.
