تلوين وتغيير شكل صندوق الاوسمه او ( التسميات ) في بلوجر

بسم الله الرحمن الرحيم والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم السلآم عليكم ورحمة الله وبركاته

تلوين وتغيير شكل صندوق الاوسمه او ( التسميات ) في بلوجر - Coloring and change the labels in blogger

صندوق التسميات ضمن أدوات blogger يوفر طريقتين للعرض ’قائمة وسحابة‘ وتعتمد السحابة في الظهور إلى عدد المرات التى استخدمت فيها نفس التسميه أو ما هو عدد التدوينات داخل كل تسميه، ومنها تلاحظ في حالة تفعليها أن هناك أحجام مختلفة لكل تسميه فالتسميات التى تحتوي على أكبر عدد من التدوينات ظهرت بخط كبير والعكس...

وغالبا نحن لا نستطيع التحكم في شكل تلك التسميات كتغيير حجمها مثلاً أو تحديد لون لكل مجموعة تسميات وذلك لعدم وجود خيارات لذلك عند تهئيه الأداه من عناصر الصفحة، لكن هناك طريقة للتخصيص لو علمت ما هي محددات CSS التى تتحكم في ذلك الصندوق

مثال

حسننا لنبدأء : لتلوين وتغير شكل صندوق الاوسمه او ( التسميات ) في بلوجر اتبع الاتي :

• ادخل الى مدونتك > ثم لوحة التحكم 
• ادخل على القالب لكي نضيف له الكود
• انسخ هذا الكود وضعه قبل :  ]]></b:skin>

.cloud-label-widget-content {
  text-align: center;
}
.cloud-label-widget-content a {
  font-family: Arial, sans-serif;
  font-weight: bold;
  white-space: nowrap;
}
.cloud-label-widget-content span {
  padding: 0 5px 0 5px;
}
.label-size-1 a { font-size:14px; color:#2F2F2F; }
.label-size-2 a { font-size:16px; color:#11AA23; }
.label-size-3 a { font-size:18px; color:#588EFF; }
.label-size-4 a { font-size:22px; color:#DA484B; }
.label-size-5 a { font-size:26px; color:#3B5998; } 

.cloud-label-widget-content {

وهو محدد الصندوق الذي يتضمن روابط التسميات، وفيه قمت بالتوسيط ولك حرية إعطائه أي خصائص أخرى كخلفية مثلاً أو غيرها.

.cloud-label-widget-content a {

روابط التسميات وفيها غيرت نوع الخط وجعلته سميك أما الخاصية white-space بالقيمةnowrap وضعتها لتحكم أفضل في المساحات البيضاء فأنا لا أريد عندما يكون هناك تسميات طويلة أن تظهر في سطرين بسبب ضيق المساحة وهو الأمر الظاهر في جميع المدونات التى تعرض السحابة على وضعها الإفتراضي مما يشوه شكل التسميات وتنسيقها، فهذه الخاصية تجعل كل تسميه مهما كانت طويلة تظهر كاملة في سطر ولا تنكسر حتى وإن أدى ذلك الى خروجها عن مساحة صندوق التسميات.

.cloud-label-widget-content span {

للفصل بين كل تسميه وأخرى عن طريق الهوامش الداخليه.

.label-size

التسميات تظهر في 5 أحجام مختلفة فكما قلنا أنه إذا زادت عدد التدوينات داخل نفس التسميه تظهر بخط كبير، تبدأ من 1 وهو الأصغر ويطبق على التسميات التى تحتوي على أقل عدد من التدوينات وينتهي بالرقم 5 وهو أكبرهم ويظهر للتسميات التى تحتوى على أكبر عدد، وقد ميزت كل مجموعة بلون مختلف مع تعديل أحجام الخطوط.

هذا كل شيء :)