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