إضافة تأثير اهتزاز الصور إلى مدونات BLOGGER

إضافة تأثير اهتزاز الصور إلى  مدونات BLOGGER

بسم الله الرحمن الرحيم والصلاة والسلام على محمد نبي العالمين ,عيد سعيد وكل عام وانتم بخير

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

 نذهب لشرح كيفية تطبيق الإضافة على قالب مدونتك

أولا قبل كل شيء أنصحك دائما قبل إن تجري أي تعديل على القالب مهما كان بسيط في نضرك, قم دائماً بتنزيل قالب مدونتك إلى جهازك لتفادي الاخطاء:

نبحث على الرمز التالي ]]></b:skin> باستعمال لوحة اختصار المفاتيح (CTRL+F) :

 وقبله مباشرة ضع الرمز التالي :

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

(+2 درجة) هو درجة من الانحراف قبل وضع مؤشر الماوس

(- 1deg) هو درجة الانحراف بعد وضع مؤشر الماوس.

أتمنى أن يعجبكم الدرس كان معكم جامع الحيان دمتم بألف خير