قمت بتقديم درسين حول تغيير شكل سحابة التسميات الى أشكال مختلفة .كل درس فيه أشكال جميلة وتأثيرات جذابة لسحابة التسميات في بلوجر.اليوم درس جديد يصب في نفس الموضوع وهو تغيير شكل سحابة التسميات .سوف أقدم فيه المزيد من الاشكال الأنيقة و التأثيرات الرائعة.
تركيب الاضافة
1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)
2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)
2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)
الشكل 1
.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;
}
الشكل 2
كود الاضافة
/*-----Custom
Labels widget by www.rydnet.blogspot.com----*/
#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color:#000000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 5px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px
4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}
الشكل 3
كود الاضافة
/*-----Custom
Labels widget by www.rydnet.blogspot.com----*/
#Label1 a{
outline:1px dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding:
6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff;
-moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px
4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}
الشكل 4
كود الاضافة
/*-----Custom
Labels widget by www.rydnet.blogspot.com----*/
#Label1 a{float: left;
font-size: 11px!important;
line-height: 1em!important;
display: block;
margin-right: 7px;
margin-bottom: 7px;
padding: 7px;
background: #ffd964
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspuieuZAN1criDexr6T9fKY6H2hJOOuGnjVdzCbIKpqfB2-An0hiVvTcm9PptH2q5UEhcdoBHAmF-VpBPj7d5WHP8UDoxBFSExWIIiinZwAhialupV-PrV-BIbKgn4zW05GA7zaEEUE0/s1600/yellow-btrix.png);
border: 1px solid #F9B653;
color: #9C6533!important;
text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#Label1 a:hover{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl_9saWJKCl-XIdX3jQDnFmhwm_BWMcba6R1XSJWtS06CmZwPFXCNO8AxY75fzsI96x0AhYOWNdy7pVpriNOta2kHrNiSYKwJA-HVYPwvXbYpYhwjyBP_PjZDzUI3kFJRZTOYp2yhF0E0/s1600/yellow-btrix-hover.png);}
#Label1
a:active { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyd3y5qFeDJt003URkCboQYtxHDW9T1nolZqL1mveVZhjL7NBVBow1JnsZ7fDt87VX5Bqu08Ao_cKypu3aqSq0MZWvO-NZFS51ZbY5Q6TscHnCycgB52TgWLIz3q9PnyBzrhUzM22KRs0/s1600/yellow-btrix-active.png);
}
الشكل5
كود الاضافة
.label-size{
background: #DAD8D9;
background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 );
margin:0 4px 7px 0;
padding: 2px 7px 2px 7px;
text-transform: uppercase;
border: solid 1px #777;
float:right;
text-decoration:none;
font-size:14px;
font-weight:bold;
box-shadow: 0 1px 2px #999;
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
text-align:center;
}
.label-size:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
}
انتهينا من الاضافة........
قمت بتقديم 3 دروس حول تغيير شكل سحابة التسميات الى أشكال مختلفة .كل درس فيه أشكال جميلة وتأثيرات جذابة لسحابة التسميات في بلوجر.اليوم درس جديد يصب في نفس الموضوع وهو تغيير شكل سحابة التسميات .سوف أقدم فيه المزيد من الاشكال الأنيقة و التأثيرات الرائعة.
تركيب الاضافة
1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)
الشكل 1
كود الاضافة
/*-----Custom
Labels widget by http://rydnet.blogspot.com/----*/
#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%,
rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1)
0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1)
100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1)
100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1)
0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /*
IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,192,240,1) 0%,
rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,192,240,1)
0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,192,240,1)
0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,192,240,1)
0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,192,240,1)
0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /*
IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px
55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}
الشكل 2
كود الاضافة
#Label1 a{
position:relative !important;
margin:4px;
padding:3px;
float:left;
white-space:nowrap;
background:#E0DDDD;
color:#454242;
border:1px solid #454242;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
font-family: "Arial","Helvetica",sans-serif;
font-size:12px;
text-decoration:none;
text-transform:capitalize;
-moz-transition:all .6s linear ;
-webkit-transition:all .6s linear ;
-o-transition:all .6s linear ;
transition:all .6s linear ;
}
#Label1 a:hover {
background:#6992E9;
color:#F3F4F8;
-moz-transition:all .3s ease ;
-webkit-transition:all .3s ease ;
-o-transition:all .3s ease ;
transition:all .3s ease ;
}
الشكل 3
كود الاضافة
/*
http://rydnet.blogspot.com/ BY LABEL Custom
Cloud--------------------------------------------- */ .Label a{
padding-left:20px; background:#000; padding:0 20px;
color:#fff!important; border-radius:100px; -moz-border-radius:100px;
height:32px; line-height:32px; text-transform:uppercase;
text-decoration:none; border:none !important; -webkit-transition:all .3s
ease-in-out !important; 30pxt: 30px; float:left; margin-left:5px;
margin-top:5px; font-size:10px; margin-bottom:5px;} .Label a:hover{
color:#fff !important; background:#e25f07 }
الشكل 4
كود الاضافة
.label-size
a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 15px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #000000;
border: 1px dotted #FFFFFF;
background: rgb(238,177,75);
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%,
rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FF3333', endColorstr='#330000',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%,
rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 );
}
الشكل5
كود الاضافة
.label-size
a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 15px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0
rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #000000;
border: 3px solid #FFFFFF;
background: rgb(238,177,75);
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%,
rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1)
0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FF3333', endColorstr='#330000',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%,
rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1)
0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 );
}
انتهينا من الاضافة........
تركيب الاضافة
1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)
الشكل 1
كود الاضافة
/*
------Sidebar Label Cloud By http://rydnet.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;} - See more at:
http://rydnet.blogspot.com/2013/11/labels-cloud-widget-some-efficts4.html
الشكل 2
كود الاضافة
.label-size{
margin:0
2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
display:inline-block;float:none;font-family:”Trebuchet
MS”,”Arial”,”Helvetica”,sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#1BA1E2;color:#fff
!important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px
#999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px
#999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform
0.1s ease-in;-moz-transition:-moz-transform 0.1s
ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform
0.1s ease-in;
}
.label-size:hover {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px
rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px
rgb(0,0,50);box-shadow:0 0 10px
rgb(0,0,50);-webkit-transform:rotate(3deg)
scale(1.2);-moz-transform:rotate(3deg)
scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg)
scale(1.2);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817,
M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=’auto
expand’);
zoom: 1;
}
.label-size a {
display:inline-block;float:none;margin:2px 1px;padding:6px
3px;font-family:”Trebuchet
MS”,”Arial”,”Helvetica”,sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#252c44;color:#fff
!important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0
1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0
-1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px
-1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px
#999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px
#999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform
0.1s ease-in;-moz-transition:-moz-transform 0.1s
ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform
0.1s
ease-in;background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);
}
.label-size
a:hover {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px
rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px
rgb(0,0,50);box-shadow:0 0 10px
rgb(0,0,50);-webkit-transform:rotate(3deg)
scale(1.2);-moz-transform:rotate(3deg)
scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg)
scale(1.2);-webkit-transform:rotate(-3deg)
scale(1.2);-moz-transform:rotate(-3deg)
scale(1.2);-o-transform:rotate(-3deg)
scale(1.2);background-color:#0c92da;transform:rotate(-3deg)
scale(1.2);-webkit-transform:rotate(3deg)
scale(1.2);-moz-transform:rotate(3deg) scale(1.2);transform:rotate(3deg)
scale(1.2);background-color:#0c92da;-webkit-transform:rotate(2deg)
scale(1.2);-moz-transform:rotate(2deg)
scale(1.2);background-color:#0c92da;-o-transform:rotate(2deg)
scale(1.2);transform:rotate(2deg) scale(1.2);
}
الشكل 3
كود الاضافة
.label-size a {
font-size: 14px!important;
padding: 1px 6px;
border-top: 1px solid #CACACA;
border-left: 4px solid #00A8FF;
margin-bottom: 5px;
float: left;
margin-right: 5px;
background: #F5F5F5;
border-right: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
}
.label-size a:hover {
border-left: 2px solid #222222;
border-right: 3px solid #222222;
background: #fff;
}
الشكل 4
كود الاضافة
.label-size a {
text-transform: uppercase;
float: left;
text-decoration: none;
margin: 0 3px 6px 0;
padding: 3px;
border: solid 1px #999;
border-radius: 3px;
font-size: 12px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.label-size a:hover {
border: 1px solid black;
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}
الشكل5
كود الاضافة
.label-size a {
text-transform: uppercase;
float: left;
text-decoration: none;
margin: 2px 3px 6px 0;
padding: 3px;
border: solid 1px #999;
border-radius: 3px;
font-size: 12px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-moz-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-ms-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-o-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
}
.label-size a:hover {
border: 1px solid black;
-webkit-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-ms-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
}
الكاتب : reka
ضع هنا وصف مختصر أو غير غير مختصر تصف به نفسك أو عدم وصفها لا تكترت بما أقول لأنني أخاول فقط تعبأت هذا المكان بالكلمات لكي يبدو جيدا , شكر على قرائتك له رغم أنه غير مفيد
ليست هناك تعليقات:
إرسال تعليق