طريقة إضافة المؤثرات الحركية على صور مدونات Blogger

طريقة إضافة المؤثرات الحركية على صور مدونات Blogger

من الجميل أن تميز مدونتك عن باقي المدونات ببعض الإضافات التي أقوم بعرضها بشكل مستمر , هذه الإضافة تزيد جمالية للصور الموجودة في مدوتك الإلكترونية بعمل تأثيرات حركية عليها عند مرور مؤشر الماوس عليها وحين إبتعاد المؤشر ترجع كما كانت , في درسنا اليوم سنتعلم طريقة عمل هذه الاداة كما سنشرح بالصور كالعادة لكي تصل لكم المعلومة بسهولة .

مثال لهذا العمل يمكنكم زيارة إحدى صفحاتي التي قمت بإضافة هذه الإضافة لها :


HA$H 4 Free Anime





في حال أعجبتكم قوموا بالتركيز معي بهذه الخطوات لننهي الدرس من دون أية مشاكل في القالب :


الخطوة الأولى : من لوحة التحكم >> تصميم >> تحرير HTML :

الخطوة الثانية : التأشير على "توسيع قوالب عناصر واجهة المستخدم" :

الخطوة الثالثة : نبحث عن الكود التالي بالضغط على Ctrl + F :

]]</b:skin>

الخطوة الرابعة : إضافة الـ Code التالي قبل الـ Code الأول مباشرة :

.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

يمكن تغيير الكتابات باللون الأحمر في الكود السابق للتحكم في درجة ميلان وإتجاه الميلان بتعويض "+" بـ "-" على سبيل المثال .

أرجو أن يكون الدرس مفهوم وواضح للجميع , تمنياتي للجميع بالتوفيق :)