تغير شكل التسميات الى شكل احترافي بتقنية css3

الكاتب بتاريخ عدد التعليقات : 2
السلام عليكم ورحمة الله وبركاته مرحبا بكم زوار ومتابعين مدونة مهووسين الويب نلتقي الان في تدوينة وموضوع جديد في مدونتنا المتواضعة مدونة مهووسين الويب طبعا كما كل مرة نأتي لكم بالاشياء الحصريه وإذا لم تكن حصريه فأنا متأكد انها احترافية جدا نحن في مدونة مهووسين الويب نسعى لكي نرتقي بالعرب الى اعلى القمم صحيح ان الصعود الى القمة صعب ولكن النزول الى الهاوية اصعب ونحن نجتمع في هذه اللحظة لكي نقدم اليكم هذا الشرح الجديد بعنوان: تغير شكل التسميات الى شكل احترافي بتقنية 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;
 }

2 تعليقات على موضوع " تغير شكل التسميات الى شكل احترافي بتقنية css3 "

رائع أخي وا صل ها مدونتي ادا أردت تبادل اعلاني
http://th3mahwos.blogspot.com/

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء