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

أهلا و سهلا بزوارنا الكرام .اليوم اضافة جديدة و رائعة عبارة عن تغيير شكل سحابة التسميات و الاقسام عند تمرير الماوس عليها.هذه الاضافة تزيد مدونتك أناقة و جاذبية....في هذا الموضوع سأقدم عدة أشكال في موضوع واحد .

اختر الشكل الذي يعجبك وأضفه الى مدونتك.

هذه الاضافة لها عدة أشكال و تأثيرات وكل شكل له كود خاص سنتطرق في البداية الى طريقة تركيب الكود ثم سنعرض الشكل و

الكود المناسب له.

تركيب الاضافة:

1- من لوحة التحكم >>> قالب >>> تحرير html (احفظ نسخة من القالب)

2- ابحث بواسطة ctrl+f عن الوسم : ]]></b:skin>

3- انسخ الكود الذي اخترته وضعه قبل الوسم مباشرة.

4- احفظ القالب.

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

الشكل 1

كود الاضافة

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

.label-size{ background-color: #FBFBFB; margin:0 2px 6px 0; text-transform: uppercase; padding: 3px; border-radius:10px; border: 3px solid #BAB4B8; float:left; text-decoration:none;font-size:15px;color:#666;} .label-size:hover { background-color: #FBFBFB; border:3px solid #000000; -o-transition: all 0.5s ease-out; text-decoration: none; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-box-shadow: 0 5px 2px #555; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; box-shadow: 0 4px 2px #555; -webkit-box-shadow: 0 5px 2px #555; transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, expand'); zoom: 1; } .label-size a { text-transform: uppercase; } float:center; text-decoration: none; }.label-size a:hover { text-decoration: none;

الشكل2

كود الاضافة


 /*-----Labels Cloud effects widget by http://rydnet.blogspot.com----*/
    .label-size{
    background-color: #FBFBFB;
    margin:0 2px 6px 0;

    border: 3px solid #BAB4B8;
padding: 3px;
    text-transform: uppercase;
    border-radius:10px;
    float:left;

    background-color: #FBFBFB;
text-decoration:none;font-size:15px;color:#666;}
    .label-size:hover {
    border:3px solid #000000;
    text-decoration: none;

    -ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

    M11=0.9961946980917455, M12=-0.08715574274765817, 
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(

    text-decoration: none;
M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto 
expand');
    zoom: 1;
    }
    .label-size a {
    text-transform: uppercase;
    float:center;
    }.label-size a:hover {
    text-decoration: none;

    }

الشكل3

كود الاضافة


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

    background-color: none;
.label-size{
    margin:0 2px 6px 0;

    border: 2px solid #545353;
padding: 3px;
    text-transform: uppercase;

    text-decoration:none;font-size:15px;color:#666;}
border-radius:5px;
    float:left;
    .label-size:hover {

    text-decoration: none;
background-color: #DEDDDD;
    border:none;
    border-radius:10px;

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

    -moz-box-shadow: 0 5px 2px #555;
-ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    box-shadow: 0 4px 2px #555;

    M11=0.9961946980917455, M12=-0.08715574274765817, 
-webkit-box-shadow: 0 5px 2px #555;
    filter: progid:DXImageTransform.Microsoft.Matrix(

    text-transform: uppercase;
M21=0.08715574274765817,      M22=0.9961946980917455, sizingMethod='auto
 expand');
    zoom: 1;
    }
    .label-size a {
    float:center;

    }
text-decoration: none;
    }.label-size a:hover {

    text-decoration: none;

الشكل4

كود الاضافة


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

    background-color: #EEBE7F;
.label-size{
    margin:0 2px 6px 0;

    border: none;
padding: 3px;
    text-transform: uppercase;

    text-decoration:none;font-size:15px;color:#666;}
border-radius:5px;
    float:left;
    .label-size:hover {

    text-decoration: none;
background-color: #EE8B0B;
    border:none;
    border-radius:7px;

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

    -moz-box-shadow: 0 3px 1px #555;
-ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    box-shadow: 0 2px 1px #555;

    M11=0.9961946980917455, M12=-0.08715574274765817, 
-webkit-box-shadow: 0 3px 1px #555;
    filter: progid:DXImageTransform.Microsoft.Matrix(

    text-transform: uppercase;
M21=0.08715574274765817,      M22=0.9961946980917455, sizingMethod='auto
 expand');
    zoom: 1;
    }
    .label-size a {
    float:center;

    }
text-decoration: none;
    }.label-size a:hover {

    text-decoration: none;

الشكل5

كود الاضافة


 /*----- Labels Cloud effects widget by http://rydnet.blogspot.com----*/
   
.label-size{
    background-color: #ECCAEA;
    margin:0 2px 6px 0;

    border-radius:10px;
padding: 3px;
    text-transform: uppercase;
    border: none;
    float:left;

    background-color: #DBE2EA;
text-decoration:none;
    font-size:15px;
    color:#666;}
   
.label-size:hover {
    border:none;

    -o-transition: all 0.5s ease-out;
border-radius:10px;
    text-decoration: none;
    -moz-transition: all 0.5s ease-out;

    box-shadow: 0 0px 0px #555;
-webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

    M11=0.9961946980917455, M12=-0.08715574274765817, 
-moz-box-shadow: 0 0px 0px #555;
    -webkit-box-shadow: 0 0px 0px #555;
   
filter: progid:DXImageTransform.Microsoft.Matrix(

    float:center;
M21=0.08715574274765817,      M22=0.9961946980917455, sizingMethod='auto
 expand');
    zoom: 1;
    }
   
.label-size a {
    text-transform: uppercase;
    text-decoration: none;

    }
}.label-size a:hover {

    text-decoration: none;

تنبيه هام : قد تختلف تسمية أداة الكلمات الدلالية في قالب مدونتك .في الكود أعلاه اسم الاداة هوlabel-size ابحث في قالب مدونتك عن اسم أداة الكلمات الدلالية و استبدلها في الكود أعلاه باسم الاداة لديك.

مبروك انتهت الاضافة ........

سبق ورأينا في درس سابق كود للتسميات بسبعة أشكال رائعة و تأثيرات جذابة. اليوم سأقدم لكم المزيد من أشكال التسميات بتأثيرات رائعة.

تركيب الاضافة

1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)

2- ابحث بواسطة ctrl.f على الوسم : ]]></b:skin>

3- انسخ كود الشكل الذي تريده قبل الوسم مباشرة .

4- احفظ القالب .

تنبيه : لاتنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد).

الشكل 1

كود الاضافة

.Label

a{ background: rgb(0,100,180); background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); background: -webkit-gradient(linear, left top, left bottom, 0%,rgba(20,60,100,1) 100%); background: -webkit-linear-gradient(top, rgba(0,100,180,1) background: -o-linear-gradient(top, rgba(0,100,180,1) background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 0%,rgba(20,60,100,1) 100%); background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 100%); display:inline-block;border: 1px solid #005ca6;padding:0 8px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); color:#fff!important; height:28px; line-height:28px; ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s .Label a:hover{color:#000 !important; background:#123d60;} ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); }

الشكل 2

كود الاضافة

.Label

a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}

الشكل 3

كود الاضافة

/*--- MBL Custom Label Cloud With CSS3 --- */

.Label a{ padding-left:20px; background:#000; border-radius:100px; padding:0 20px; color:#fff!important; text-transform:uppercase; -moz-border-radius:100px; height:32px; line-height:32px; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; text-decoration:none; border:none !important; float:left; margin-left:5px; background:#ff0; } margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important;

الشكل4

كود الاضافة

/*-----Custom Labels Cloud widget by http://rydnet.blogspot.com/----*/

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; text-decoration:none; border-radius: 3px; float:left; .label-size:hover { font-size:10px; color:#666; } -moz-transition: all 0.5s ease-out; border:1px solid #6BB5FF; text-decoration: none; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transform: rotate(7deg); transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( -ms-transform: rotate(7deg); transform: rotate(7deg); M11=0.9961946980917455, M12=-0.08715574274765817, text-transform: uppercase; M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

الشكل5

كود الاضافة

.label-size {

float: left; margin: 0 0 7px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; padding: 0.417em 0.417em 0.417em 0.917em; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); border-bottom: 1px solid #d99d38; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-radius: 0 0.25em 0.25em 0; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); z-index: 1; } .label-size:before { content: ''; width: 1.30em; height: 1.39em; background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); border-left: 1px solid #d99d38; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; box-shadow: 0 1px 0 #faeaba; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; } .label-size:after { content: ''; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; position: absolute; background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); top: 0.667em; left: -0.083em; z-index: 9999; } #Label1 { height: 210px; } .label-size:hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; } .label-size:hover:before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); } background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160;

انتهت الاضافة..........

واتساب

الكاتب : reka

ضع هنا وصف مختصر أو غير غير مختصر تصف به نفسك أو عدم وصفها لا تكترت بما أقول لأنني أخاول فقط تعبأت هذا المكان بالكلمات لكي يبدو جيدا , شكر على قرائتك له رغم أنه غير مفيد

دعم فنى

الجمعة، 14 ديسمبر 2018