طريقة تعديل أشكال التسميات بشكل رائع وبتأثيرات جميلة و جذابة

 

طريقة تعديل أشكال التسميات بشكل رائع وبتأثيرات جميلة و جذابة

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

• نقوم بتسجيل الدخول الى Blogger
• من لوحة التسجيل  >>>  قالب   >>>   تحرير HTML (احفظ نسخة من القالب قبل التعديل عليه)
• ابحث بواسطة   ctrl.f   على الوسم  :       ]]></b:skin>
• انسخ كود الشكل الذي تريده قبل الوسم مباشرة .
• احفظ القالب .

ملاحظة : لاتنس اضافة أداة التسميات من خلال  تخطيط  >>>  اضافة أداة  >>>  التسميات(ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد ).

الشكل الأول

.Label a{ background: rgb(0,100,180); background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .Label a:hover{color:#000 !important; background:#123d60;}

الشكل الثاتي

.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}

الشكل الثالث

/*--- MBL Custom Label Cloud With CSS3 --- */ .Label a{ padding-left:20px; background:#000; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#ff0; }

الشكل الرابع

/*-----Custom Labels Cloud widget by http://rydnet.blogspot.com/----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; 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; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); 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:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

من هنا نكون قد انتهينا من موضوع اليوم اتمنى ان تكونو قد استفدتم وان اعجبك الموضوع برجاء مشاركته مع الاصدقاء حتى تعم الفائده ولا تنسى الاشتراك فى صفحاتنا على مواقع التواصل حتى تكون اول المستفيدين , لكم منا كل الاحترام والتقدير والى اللقاء فى موضوع جديد على مدونة كلشي مجاني