تغير شكل سحابة التسميات إلى أشكال رائعة جدا

زوار ومتابعي المدونة

السلام عليكم ورحمة الله وبركاته

أقدم لكم اليوم أشكال رائعة من سحابة التسميات

- طريقة التركيب :

1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم أختر إضافة أداة " التسميات " وطبق كما بالصورة التالية :

3- بعد ذلك أختر " قالب " | ثم تحرير قالب .

4- إبحث عن الوسم : ]]></b:skin>

5- ضع الكود التالي فوقه .

الشكل الأول

ــــــــــــــــــــــ

الكود

#Label1 a{background:#FEB380;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#FED9BF), to(#FEB380));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#FED9BF), to(#FEB380));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

الشكل الثاني

ــــــــــــــــــــ

الكود

#Label1 a{background:#CCFF00;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F2FEBF), to(#E6FE80));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F2FEBF), to(#E6FE80));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

الشكل الثالث

ـــــــــــــــ

الكود

#Label1 a{background:#000000;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#000000), to(#000000));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#000000), to(#000000));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

الشكل الرابع

ـــــــــــــــــ

الكود

#Label1 a{background:#99FE80;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#BFFEBF), to(#80FE80));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#BFFEBF), to(#80FE80));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

الشكل الخامس

ــــــــــــــ

الكود

#Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

الشكل السادس

ـــــــــــــ

الكود

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}
.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}
.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}

الشكل السابع

ــــــــــــــ

الكود

/* ------Sidebar Label Cloud  By http://homeblog7.blogspot.com/---------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest