اذا أردت عمل شكل جمالي لموقعك كتحريك لوجو واضافة تأثير العومان علي لوجو مدونة بلوجر فقط عبر كود سنقوم بشرحه يتيح لك ميزة تحريك الشعار بتأثير العومان عند تمرير مؤشر الفأرة فوقه لمدونات بلوجر ولقالب سكويز خصوصا
اضافة كود تاثير العوامان علي لوجو لمدونة بلوجر
يعد اضافة تأثير تحريك الشعار أو تأثير تحريك لوجو مدونة بلوجر أمر جمالي لاغير, حيث يعطي نظرة جميلة لموقعك واحترافية من خلاله تجذب نظر الزائر لموقعك وتعطيه انطباع بأنك مهتم بموقعك
طريقة اضافة تأثير التحريك للوجو في بلوجر
خطوات اضافة تأثير التحريك علي لوجو المدونة ,لتحريك الشعار بلوجر فالخطوات كالأتي:
- قم بالدخول لموقع بلوجر
- توجه الي المظهر, اضغط علي السهم ثم تعديل Html
- اضغط Ctrl+F للبحث
- ابحث عن الوسم ]]>*/</style> وقم بوضع الكود فوقه واعمل حفظ
/* Logo animation */
#Header1 h1 a:hover{/*animation*/
-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s;}
#Header1 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);}}.gif)
هل يؤثر اضافة الكود علي سرعة المدونة
في الحقيقة لا لأن كود css يمكنك فقط من عمل ايفيكت وتحريك للوجو ولن يؤثر علي سرعة الموقع, كما أنه أمر سهل للغاية ولايتطلب احترافية في لغة Html
رابط الكود من هنا
والي هنا نكون قد انتهينا من شرحنا حول طريقة اضافة تاثير متحرك الي لوجو المدونة عبر طريقة بسيطة وسهلة نلتقي في شرح قادم ان شاء الله