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

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

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

  • إذهب إلى لوحه تحكم بلوجر لمدونتك
  • ثم إضغط قالب ثم تحرير 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 );
    } 

    تم بحمد الله 

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)