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

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

هذه الاضافة لها عدة أشكال و تأثيرات وكل شكل له كود خاص سنتطرق في البداية الى طريقة تركيب الكود ثم سنعرض الشكل و الكود المناسب له.
تركيب الاضافة:
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; 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                         

كود الاضافة 

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

                                   الشكل3                          

كود الاضافة

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

                             الشكل4                        

كود الاضافة

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

                                 الشكل5                    

كود الاضافة

/*----- Labels Cloud effects widget by http://rydnet.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 ابحث في قالب مدونتك عن اسم أداة الكلمات الدلالية و استبدلها في الكود أعلاه  باسم الاداة لديك.

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

مع تحيات حمزة رمزي..............

ع تحيات حمزة رمزي.........

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

تغيير شكل سحابة التسميات-2   - جديد !

تغيير شكل سحابة التسميات-3   - جديد !

تغيير شكل سحابة التسميات-4   - جديد !

تغيير شكل سحابة التسميات-5   - جديد !

منشورة في: اضافات بلوجر, سحابة التسميات