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

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

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

لمشاهدة مثال على التأثير :

مثال

الآن نمر إلى طريقة تركيب الكود و ذلك باتباع الخطوات التالية :

• اذهب إلى لوحة التحكم ثم إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم .
• قم بتحميل نسخة من قالب المدونة تحسبا لأي خطأ .
• قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]</b:skin>

• قم بإضافة الكود التالي فوق الكود السابق

.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);
}

يمكنك تغيير درجات الميلان بتغيير قيم “+” و “-” كما يناسبك بعد ذلك قم بعمل حفظ للقالب و مبروك عليك التأثير

الدرس انتهى, ألقاكم في درس قادم ان شاء الله