كيف نقوم باضافة تأثيرات حركية على الصور في مدونات بلوجر ؟

قراءة للموضوع

اخوتي الكرام : السلام عليكم ورحمة الله وبركاتة وبعد غيبة طويلة ها انا اليوم اعود مرة ثانية ، نتعلم اليوم اخوتي الاعزاء على خاصية جميلة وهي (كيف نقوم باضافة تاثيرات حركية على الصور التي يتم نشرها على مدونات بلوجر ) هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ، وايظاً صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ،،،

والآن دعونا لنتوجه لتطبيق الكود :

- انتقل الى لوحة تحكم مدونتك ثم اختر علامة ( تصميم ) ثم ( تحرير 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);
}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك  سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس  وتمثل كذلك القيمة  1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .


والتتيجة تكون الصورة على هذا الشكل .

أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،

استفساراتكم وتعليقاتكم مرحبا بها 

المصدر مدونة ابو اياد