تغيير شكل سحابه التسميات إلى عده أشكال مميزه وجميله وتأثيرات رائعه

السلآم عليكم ورحمه الله وبركاته
بعد السلام والصلاه على رسول الله {صلـ الله عليه وسلم ــى} فقد قمت قبل أمس بوضع أداه هامه لكل المدونات وهى اداهأحصل على تحديثات المدونه اللتى تضم الإشتراك فى جميع الصفحات والخلاصات لمدونات بلوجر
أما ليوم فأقدم لكم تغيير شكل سحابه التسميات أو التصنيفات أوالكلمات الدلاليه إلى عده أشكال مميزه وجميله وتأثيرات أكثر من رائعه

قد يساعدك أيضا :

تغيير شكل سحابه الكلمات الدلاليه فى مدونات بلوجر من الشكل العادى لقائمه منسدله"حصرى"

اداه أحدث التعليقات بشكل رائع وأكتر من تأثير لمدونات بلوجر

معاينه حيه للأداه

الأن نأتى لكود الإضافه الجميله

إختر الشكل المنآسب لمدونتك

شكل 1

كود الإضافه

.label-size{

background-color: #FBFBFB;

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: 3px solid #BAB4B8;

border-radius:10px;

float:left;

text-decoration:none;font-size:15px;color:#666;}

.label-size:hover {

background-color: #FBFBFB;

border:3px solid #000000;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

box-shadow: 0 4px 2px #555;

-moz-box-shadow: 0 5px 2px #555;

-webkit-box-shadow: 0 5px 2px #555;

-moz-transform: rotate(15deg);

-o-transform: rotate(15deg);

-webkit-transform: rotate(15deg);

-ms-transform: rotate(15deg);

transform: rotate(15deg);

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 {

text-transform: uppercase;

float:center;

text-decoration: none;

}.label-size a:hover {

text-decoration: none;

}

شكل 2

كود الإضافه

.label-size{

background-color: #FBFBFB;

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: 3px solid #BAB4B8;

border-radius:10px;

float:left;

text-decoration:none;font-size:15px;color:#666;}

.label-size:hover {

background-color: #FBFBFB;

border:3px solid #000000;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

box-shadow: 0 4px 2px #555;

-moz-box-shadow: 0 5px 2px #555;

-webkit-box-shadow: 0 5px 2px #555;

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 {

text-transform: uppercase;

float:center;

text-decoration: none;

}.label-size a:hover {

text-decoration: none;

}

شكل 3

كود الإضافه

.label-size{

background-color: none;

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: 2px solid #545353;

border-radius:5px;

float:left;

text-decoration:none;font-size:15px;color:#666;}

.label-size:hover {

background-color: #DEDDDD;

border:none;

border-radius:10px;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

box-shadow: 0 4px 2px #555;

-moz-box-shadow: 0 5px 2px #555;

-webkit-box-shadow: 0 5px 2px #555;

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 {

text-transform: uppercase;

float:center;

text-decoration: none;

}.label-size a:hover {

text-decoration: none;

}

شكل 4

كود الإضافه

.label-size{

background-color: #EEBE7F;

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: none;

border-radius:5px;

float:left;

text-decoration:none;font-size:15px;color:#666;}

.label-size:hover {

background-color: #EE8B0B;

border:none;

border-radius:7px;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

box-shadow: 0 2px 1px #555;

-moz-box-shadow: 0 3px 1px #555;

-webkit-box-shadow: 0 3px 1px #555;

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 {

text-transform: uppercase;

float:center;

text-decoration: none;

}.label-size a:hover {

text-decoration: none;

}

شكل 5

كود الإضافه

.label-size{

background-color: #ECCAEA;

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: none;

border-radius:10px;

float:left;

text-decoration:none;

font-size:15px;

color:#666;}

.label-size:hover {

background-color: #DBE2EA;

border:none;

border-radius:10px;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

box-shadow: 0 0px 0px #555;

-moz-box-shadow: 0 0px 0px #555;

-webkit-box-shadow: 0 0px 0px #555;

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 {

text-transform: uppercase;

float:center;

text-decoration: none;

}.label-size a:hover {

text-decoration: none;

}

شكل 6

كود الإضافه

.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 );

}

شكل 7

كود الإضافه

.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;