-->
مدونة ساعة لقاء مدونة ساعة لقاء
recent

آخر الأخبار

recent
recent
جاري التحميل ...
recent

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

5:11 م
الرئيسية > بلوجر

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

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

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

.Label a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-top-colors: none;
-moz-border-right-colors: none
; background-color: #7FBF4D;
linear-gradient(center top , #7FBF4D, #63A62F);
background-image: -moz
- border-bottom-right-radius: 30px;
2B; border-image: none; border-st
border-color: #63A62F #63A62F #5B9
9yle: solid; border-top-left-radius: 30px; border-width: 1px;
float: left; font: 14px verdana; he
box-shadow: 0px 1px 0px 0px #96CA6D inset; color: #FFFFFF;
ight: 18px;
margin-bottom: 9px;

margin-left: 10px;

padding: 10px;
ve; text-decoration
position: relat
i: none;
sition: all 0.5s ease-in-out 0s; } .Label
tra
n a:hover {
und: none repeat scroll 0% 0% orange; border
backgr
o-radius: 0px 30px 0px 30px; border: 1px solid orange;
n: 0px; padding: 0px; positi
text-shadow: 5px 5px 5px #DCDCDC; } .Label { marg
ion: 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;
-decoration: none; color:#0
padding: 4px 10px 4px 20px; tex
t00000; white-space: nowrap; font-family: Arial;
ion: relative !impor
font-size: 12px; font-weight: bold; posi
ttant; background: #8dc63f; float: left; padding: 5px 3px;
px 4px 4px 4px; -khtml-b
margin: 0 5px 5px 0; border-radius:4px 4px; -moz-border-radius:
4order-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{
dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none; color:blac
outline:1p
xk;white-space: nowrap; font-family: arial,serif;text-transform:capitalize; font-size: 12px;font-weight: bold;
alpha(opacity:75%); float:left;padding: 4px 3px; m
position: relative !important;background: #aa00ff; -moz-opacity:0.75; -khtml-opacity:0.75;opacity:0.75; filter
:argin: 0 5px 5px 0;
; -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 {
border-radius:4px 4p
x-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;
; -moz-transition:all linear .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 .5
s-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;
margin-right: 7px; margin
line-height: 1em!important; display: block;
-bottom: 7px; padding: 7px;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9S4gUIYLL-dCLL0a0ElNiqrsvOy__qvGdz5Rzz-OymxDHVwV8JsbwDaWcgw5amGaOtL2-CPwpWaNSP7xaKCL3Fo18C-gCwDVChV7JTMXzSf7hfbnPVciUMDS4QW2IC502egskXsIvW4/s1600/yellow-btrix.png); border: 1px solid #F9B653;
background: #ffd964 url(http
: 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);
dius: 3px; border-radius:
webkit-border-radius: 3px; -moz-border-r
a3px; }
a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1Nw64Nqu4rokuRXywWiKf4o8TXKvUNXeSAYswty4C5L2UNqy4Uo-OvkzCln9TlA6_-Mz6g4oGVCUt4ajFhBeQB-95lqWHXH2lMCxIZEPPQ7MlBN3bPbks1z_1Tp82PqR7vRYl_g3bTA/s1600/yellow-btrix-hover.png);} #Label1
#Label1
a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oBGYGuTpAabT0ZtOtJTxRrHaHT0I6LxTzmplIWHqHYkiuZfO4meu5PbyUY0aIgSKVOITB-I13pEQGgl3lnqXKg4vYUInqp8ylkBoxaAGQo1sYQGgt_-ojk9zef3dVaRYiVKt58K8ERw/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;
777; float:right; text-dec
text-transform: uppercase; border: solid 1px
#oration:none; font-size:14px; font-weight:bold;
ebkit-border-radius:20px;-m
box-shadow: 0 1px 2px #999; border-radius:20px;-
woz-border-radius:20px; text-align:center; } .label-size:hover {
,#D1E0E5); backgroun
background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F
6d: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
}

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

شاهد أيضاً

إرسال تعليق

التعليقات



جميع الحقوق محفوظة

مدونة ساعة لقاء

2016