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

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

    نبدا على بركة الله

الآن نأتى لطريقه تركيب الإضافه فى مدونتك 

إذهب إلى لوحه تحكم بلوجر لمدونتك

ثم إضغط قالب ثم تحرير Html "لا تنسى حفظ نسخه من قالبك قبل البدء بالتعديل عليه "

• ثم إضغط بداخل مربع عرض اوسمه القالب الخاص بك وإضغط ctrl+f ليظهر مربع البحث

• الآن إبحث عن الوسم ]]></b:skin>
• ثم قم بنسخ الكود اللذى إخترته وضعه قبل الوسم 
• ثم إضغط حفظ النموذج ومبروك تم تغيير شكل الأداه 

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

  /*----- Labels Cloud effects widget by http://iconwpic.blogspot.com----*/
    .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;
    }

    الكود الثانى

     
    /*-----Labels Cloud effects widget by http://iconwpic.blogspot.com----*/
    .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;
    }

     

الكود الثالث

  /*----- Labels Cloud effects widget by http://iconwpic.blogspot.com----*/

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

    }

    

الكود الرابع 

   /*----- Labels Cloud effects widget by http://iconwpic.blogspot.com----*/
    .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;
    }
      الكود الخامس 

    
    /*----- Labels Cloud effects widget by http://iconwpic.blogspot.com----*/
   
.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;
    }
    

  الكود السادس 

    .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 );
} 
      الكود السابع 

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

} 

تم بحمد الله