تغيير شكل التسميات إلى شكل متعدد الألوان بتقنية css3

السلام عليكم ورحمة الله وبركاته 
مرحبا بكم زوار ومتابعين مدونة محترفي الإعلاميات
 طبعا كما كل مرة نأتي لكم بالاشياء الحصرية و نسعى لكي نرتقي بالويب العربي
اليوم اقدم لكم شرح بسيط ورائع لتغيير شكل سحابة التسميات لمدونات بلوجر الى الى شكل رائع بألوان رائعة لكل قسم لون بتقنية css3 وتضيف لمسة من الجمال والرونق لمدونتك
نمر الآن إلى طريقة التركيب :
  1. من لوحة التحكم >> قالب >> تحرير HTML
  2.  خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
  3.  قم بالبحث عن الكود ]]></b:skin>

 واضف فوقه مباشرة الكود التالي

  .cloud-label-widget-content {
 text-align: right;
 }
 .label-size {
 background: #5498C9;
 display: block;
 float: right;
 margin:0 0 3px 3px;
 color: #fff;
 font-size: 11px;
 text-transform: uppercase;
 }
 .label-size:nth-child(1) {
 background: #F53477;
 }
 .label-size:nth-child(2) {
 background: #89C237;
 }
 .label-size:nth-child(3) {
 background: #44CCF2;
 }
 .label-size:nth-child(4) {
 background: #01ACE2;
 }
 .label-size:nth-child(5) {
 background: #94368E;
 }
 .label-size:nth-child(6) {
 background: #A51A5D;
 }
 .label-size:nth-child(7) {
 background: #555;
 }
 .label-size:nth-child(8) {
 background: #f2a261;
 }
 .label-size:nth-child(9) {
 background: #00ff80;
 }
 .label-size:nth-child(10) {
 background: #b8870b;
 }
 .label-size:nth-child(11) {
 background: #99cc33;
 }
 .label-size:nth-child(12) {
 background: #ffff00;
 }
 .label-size:nth-child(13) {
 background: #40dece;
 }
 .label-size:nth-child(14) {
 background: #ff6347;
 }
 .label-size:nth-child(15) {
 background: #f0e68d;
 }
 .label-size:nth-child(16) {
 background: #7fffd2;
 }
 .label-size:nth-child(17) {
 background: #7a68ed;
 }
 .label-size:nth-child(18) {
 background: #ff1491;
 }
 .label-size:nth-child(19) {
 background: #698c23;
 }
 .label-size:nth-child(20) {
 background: #00ff00;
 }
 .label-size a, .label-size span {
 display: inline-block;
 color: #fff !important;
 padding: 4px 10px;
 font-weight: bold;
 }
 .label-size:hover {
 background: #222;
    }
 .label-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }
 .label-size:hover .label-count, .label-size:focus+.label-count {
 background-color: #ff6bb5;
 }
 
ثم سوف تجد أن شكل التسميات قد تغير
إلى هنا نكون قد وصلنا إلى ختام درسنا اليوم 
دمتم في أمان الله



تحرير المقال
عن الكاتب
مقالات مشابهة

ليست هناك تعليقات:

أو يمكنكم الإتصال بنا من خلال النموذج التالي

الاسم بريد إلكتروني* رسالة*

إعلان أول الموضوع

إعلان تحت صورة الموضوع

إعلان وسط الموضوع

للمزيد من المعلومات والمقالات إظغط على الرابط أسفله

إعلان آخر الموضوع

التعليقات

تعليقات الموقع