كيفية اضافة تأثير جميل على التسميات في بلوجر بـCSS

السلام عليكم ورحمة الله وبركاته.

 

كيفكم؟؟

 

يسرني ان اقدم لكم  شرح لكيفية اضافة تأثير على التسميات في المدونة

بحيث عند تحريك المؤشر فوق اسم اي قسم يحدث له التأثير كما في الصوره اعلاه

 

طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي اسفله مباشره:

/*-----Custom Labels Cloud widget by www.blogger-archive.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;
}

 الان اضغط حفظ.

 

 

اخيرا ارجو ان يستفيد الجميع من الموضوع

و اي استفسار يمكنك وضعه في تعليق

وساقوم بالاجابه عنه في اقرب وقت

ممكن ان شاء الله.

تحيااتي.