إضافة تأثير العومان إلى لوجو مدونة بلوجر

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

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

طريقة التركيب :

1. إذهب الى تحرير القالب HTML ، ثم إضغط Ctrl+f من لوحة المفاتيح و إبحث عن وسم  ]]></b:skin>
2. بعد أن تجد الوسم ، ضع الكود التالي قبله (فوقه) مباشرة : 

#header h1 a:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}#header img:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}  }

ثم قم بحفظ القالب و هكذا نكون انتهينا و قد تم إضافة التأثير الى اللوجو الخاص بك . 

تفضّل مشكوراً بمشاركة الموضوع