🏷️
تغيير شكل التسميات (Labels) في بلوجر
بألوان جميلة واحترافية بدون التأثير على السيو! 🎨
هل تريد تحسين مظهر التسميات في مدونتك؟
تغيير شكل التسميات من الأمور المهمة لتحسين مظهر المدونة وجعلها أكثر جاذبية للزوار. في هذا الشرح سنتعرف على طريقة تعديل شكل أداة التسميات (Labels) بألوان جميلة واحترافية دون التأثير على سرعة الموقع أو السيو.
🤔 لماذا ننصح بتغيير شكل التسميات؟
أداة التسميات الافتراضية في بلوجر شكلها عادي، لكن بتعديل بسيط على CSS يمكن تحويلها إلى تسميات ملونة تشبه الأزرار، مما يعطي مظهراً احترافياً للمدونة.
👀 معاينة النتيجة
هكذا ستبدو التسميات بعد التعديل:
تقنية
أندرويد
شروحات
بلوجر
ربح
📝 الخطوة الأولى: إضافة أداة التسميات
من لوحة تحكم بلوجر:
2
اضغط على إضافة أداة (Add Gadget)
3
اختر أداة التسميات (Labels)
📸 صورة توضيحية لإضافة أداة التسميات
📝 الخطوة الثانية: الدخول لتحرير القالب
من لوحة التحكم:
2
اضغط على تحرير HTML (Edit HTML)
</b:skin>
📝 الخطوة الثالثة: إضافة كود CSS
⚠️ تنبيه: احفظ نسخة احتياطية من قالبك قبل إضافة أي كود!
قم بلصق الكود التالي فوق الوسم </b:skin>:
CSS
/* Custom Labels Style */
#Label1 a {
outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 5px 10px;
text-decoration: none;
color: #000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background: #8dc63f;
float: left;
margin: 0 5px 5px 0;
border-radius: 4px;
transition: all 0.3s ease;
}
#Label1 a:hover {
color: rgba(0,0,0,0.6);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
🎨 نماذج ألوان جاهزة
يمكنك تغيير اللون من #8dc63f إلى أي لون تفضله:
🚀 كود متقدم: تسميات بألوان متعددة
إذا أردت جعل كل تسمية بلون مختلف تلقائياً، استخدم هذا الكود:
CSS متقدم
/* Multi-Color Labels */
#Label1 a {
padding: 6px 14px;
text-decoration: none;
color: white;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
float: left;
margin: 0 8px 8px 0;
border-radius: 20px;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
#Label1 a:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* ألوان متعددة */
#Label1 a:nth-child(6n+1) { background: linear-gradient(135deg, #667eea, #764ba2); }
#Label1 a:nth-child(6n+2) { background: linear-gradient(135deg, #f093fb, #f5576c); }
#Label1 a:nth-child(6n+3) { background: linear-gradient(135deg, #4facfe, #00f2fe); }
#Label1 a:nth-child(6n+4) { background: linear-gradient(135deg, #43e97b, #38f9d7); }
#Label1 a:nth-child(6n+5) { background: linear-gradient(135deg, #fa709a, #fee140); }
#Label1 a:nth-child(6n+6) { background: linear-gradient(135deg, #a8edea, #fed6e3); color: #333; }
📌 ملاحظات مهمة
✅
لا يؤثر على الأرشفة
التعديل يخص CSS فقط ولا يؤثر على محركات البحث.
⚡
كود خفيف وسريع
لا يبطئ المدونة لأنه CSS نقي بدون JavaScript.
🎨
سهل التخصيص
غيّر الألوان بسهولة حسب تصميم مدونتك.
💾
نسخة احتياطية
احفظ نسخة من القالب قبل أي تعديل.
🔍 هل يؤثر هذا التعديل على السيو؟
هذا التعديل يخص فقط CSS (التصميم)، ولا يؤثر نهائياً على نتائج البحث أو الأرشفة. بل على العكس، قد يحسن تجربة المستخدم مما يعزز السيو بشكل غير مباشر!
❓ أسئلة شائعة
التسميات لا تتغير؟
تأكد أن ID الأداة هو #Label1، إذا كان مختلفاً غيّره في الكود.
كيف أعرف ID الأداة؟
اضغط كليك يمين على التسمية → فحص العنصر (Inspect) → ستجد الـ ID.
هل يعمل مع كل القوالب؟
نعم، يعمل مع معظم قوالب بلوجر. قد تحتاج تعديل بسيط في بعض القوالب المخصصة.
🎉
رائع! الآن تسمياتك أكثر جمالاً
استمتع بمظهر احترافي لمدونتك! 💜
إذا أعجبك الشرح لا تنسَ ترك تعليق تشجيعاً لنا ❤️
