السلام عليكم ورحمة الله وبركاته
اعزائى متابعى دبور فون اليوم معنا إضافةجديدة وفريدة لمدونات بلوجر تجعل عنوان المدونة سواء كان نص أو صورة يهتز بمجرد تمرير الفأرة فوقه كما هو ظاهر في الصورة أعلاه.
كيف تجعل عنوان مدونتك يتحرك بمجرد تمرير الماوس فوقه؟
- ادخل لوحة تحكم المدونة --> القالب ثم انقر على تحرير HTML
- أنقر نقرة على الأكواد ثم بإستخدام مفتاح الإختصار ctrl و f في لوحة المفاتيح ثم أبحث عن الرمز ]]></b:skin>
- بعد العثور عليه أضف الكود التالي فوق الرمز ]]></b:skin> مباشرةً
#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)} }
4. ثم أنقر على حفظ القالب
ومبروك عليك الأضافة .
هل أعجبتكم؟ إذا كان الجواب نعم يرجى المشاركة لإضافة المزيد من هذه المواضيع :)
****
بضغطة زر تشارك الفائدة وتدعم المدونة
الكاتب
