كيف تربح عن طريق موقع اختصار الروابط adf.ly
تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة -1
[22:02 | 0 التعليقات ]

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

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

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:



Paste This HTML Code On Your Page:


حمزة رمزي

مهتم بالتدوين و البرمجة و التصميم وأريد نقل خبرتي في هذا المجال للقراء لعلهم يستفيدون منها في أعمال هادفة
لمزيد من مقالاتي تابع هـــنا


التعليقات : 0

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