الخميس، 15 سبتمبر 2011

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

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



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


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


- انتقل الى لوحة تحكم مدونتك ثم اختر علامة ( تصميم ) ثم ( تحرير 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- درجة الميلان عند وضع مؤشر الماوس على الصورة .


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









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

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

15 التعليقات:

Rayanh يقول...

??

انسخ الكود التاني قبل الأول طيب وبعدين ؟

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

دا ايش اسوي فيه ؟.!

مشكور

خالد محمد (ابوخلود) يقول...

- انسخ الكود الثاني قبل الاول وبعد قم بعمل حفظ .
- دا ايش اسوي فيه ؟ هذه الكود هو اللي يعمل تاثيرات حركية في صور مدونتك

mohmad يقول...

شىء رائع ومميز بالتوافيق

http://life0environment.blogspot.com/

تطبيقات يقول...

مشكور على المعلومات ....

اخبار سياسية يقول...

سلمت يمينك :)

أخبار - أهرام يقول...

شكرا ياباشا على الموضوع

Umzug Wien يقول...

شكرا

Wohnungsräumung يقول...

thanx

أخبار اليوم يقول...

تسلم ايديك على الموضوع

توب موفيز يقول...

شكرا ياباشا على المعلومة

خالد محمد (ابوخلود) يقول...

لا شكر على واجب ونحن في خدمة الجميع ان شاء الله وقريبا في الايام هذه انتظرو المزيد من المواضيع الجديدة والمفيدة للمدونات ،،

توب موفيز يقول...

رااااائع

أخبار اليوم يقول...

موضوع مميز

Wohnungsräumung يقول...

كل عام وانتم بخير

غير معرف يقول...

شكرا لك اضافة جميلة