Recents in Beach

header ads

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

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

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; }

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

 /*-----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; }
تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة
كود الاضافة

/*-----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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNp6-ScigsO099uZyihXJiGV8zuq5HYIUKR157WsWA7yDriFab3wTjRa7HZK87SxzG6KBpOfnuhL6EKB3AKg8RSumvCDKR4SmXla5yOzZmLmNp8RKvDTVQaM72o4NyRtGezN6RFbmJ-E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZBkopjDw_d4Pf5zly64hXP9M44ubqGxU4KVRMYkpijbGL7aK3YjGswVZ02DUDSf7DsHDd2VZdAET1rfVBncZkGr58skGDgyQTAMpDSA-k3HkCtG2UCfl0KDPB-0ZomXQsLegzEVbY2M/s1600/yellow-btrix-hover.png);} #Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEUJmaxQwwQX_gyfr0JznQ2CJcKIxio_A_MFOrnvDvPl2Kiw_jW7lsETyFZeabI0Eqt9YtINkXH0S-IFAnCqjAoSlRKbt2pns20LSwi2Jm41TyxSVl_mvbV1Trn6R2i5c6WxD8ZWTiFBs/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); }

إرسال تعليق

0 تعليقات