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

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

1- من لوحة التسجيل   >>>   قالب    >>>  تحرير HTML (احفظ نسخة من القالب)
2- ابحث بواسطة   CTRL+F  على الوسم :  ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال  تخطيط   >>>  اضافة أداة    >>>   التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)
          الشكل 1          
تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة
كود الاضافة

.Label a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #7FBF4D; background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F); border-bottom-right-radius: 30px; border-color: #63A62F #63A62F #5B992B; border-image: none; border-style: solid; border-top-left-radius: 30px; border-width: 1px; box-shadow: 0px 1px 0px 0px #96CA6D inset; color: #FFFFFF; float: left; font: 14px verdana; height: 18px; margin-bottom: 9px; margin-left: 10px; padding: 10px; position: relative; text-decoration: none; transition: all 0.5s ease-in-out 0s; } .Label a:hover { background: none repeat scroll 0% 0% orange; border-radius: 0px 30px 0px 30px; border: 1px solid orange; text-shadow: 5px 5px 5px #DCDCDC; } .Label { margin: 0px; padding: 0px; position: relative; } .Label li:hover { transform: rotate(5deg); } .Label li { float: left; font-size: 116%; list-style: none outside none; transition: all 0.3s ease 0s; }

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

 /*-----Custom Labels widget by www.rydnet.blogspot.com----*/ #Label1 a{outline: 1px rgba(255,255,255,0.4) dashed; border: 1px rgba(0,0,0,0.3) dashed; padding: 4px 10px 4px 20px; text-decoration: none; color:#000000; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #8dc63f; float: left; padding: 5px 3px; margin: 0 5px 5px 0; border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; } #Label1 a:hover{color: rgba(0,0,0,0.5);} .label-size{line-height:1.5;align:left;}

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

/*-----Custom Labels widget by www.rydnet.blogspot.com----*/ #Label1 a{ outline:1px dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none; color:black;white-space: nowrap; font-family: arial,serif;text-transform:capitalize; font-size: 12px;font-weight: bold; position: relative !important;background: #aa00ff; -moz-opacity:0.75; -khtml-opacity:0.75;opacity:0.75; filter:alpha(opacity:75%); float:left;padding: 4px 3px; margin: 0 5px 5px 0; border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; } #Label1 a:hover { -moz-opacity:1; -khtml-opacity:1; opacity:1; background:#A55A27;color:white; -webkit-transition:all ease-in-out .5s; -moz-transition:all ease-in-out .5s; -o-transition:all ease-in-out .5s; transition:all ease-in-out .5s; } #Label1 a:active { background:#B24700;color:#80FFFE; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; -o-transition:all linear .5s;transition:all linear .5s; }
          الشكل 4          
تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة
كود الاضافة

/*-----Custom Labels widget by www.rydnet.blogspot.com----*/ #Label1 a{float: left; font-size: 11px!important; line-height: 1em!important; display: block; margin-right: 7px; margin-bottom: 7px; padding: 7px; background: #ffd964 url(http://1.bp.blogspot.com/-RDR_7KpQdY4/UVHGMTNoZ9I/AAAAAAAABRs/wX3rK8TRpdg/s1600/yellow-btrix.png); border: 1px solid #F9B653; color: #9C6533!important; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1); webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #Label1 a:hover{background: url(http://3.bp.blogspot.com/-gGx35EnLtls/UVHGMahuryI/AAAAAAAABRk/wmUqPUHxMNA/s1600/yellow-btrix-hover.png);} #Label1 a:active { background: url(http://3.bp.blogspot.com/-LWGrYIKfFxk/UVHGMXN71iI/AAAAAAAABRo/yP2mm8CfBug/s1600/yellow-btrix-active.png); }
          الشكل5          
تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة
كود الاضافة

.label-size{ background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); margin:0 4px 7px 0; padding: 2px 7px 2px 7px; text-transform: uppercase; border: solid 1px #777; float:right; text-decoration:none; font-size:14px; font-weight:bold; box-shadow: 0 1px 2px #999; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; text-align:center; } .label-size:hover { background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); }
انتهينا من الاضافة........
مع تحيات حمزة رمزي.........

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

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

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

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

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

rydnet

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

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 0

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