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

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

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


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

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .

هناك 69 تعليقًا:

  1. مشكوووور جدا ابو اياد
    حزاك الله خير :)

    ردحذف
  2. رائع جدا أخي الغالي ابو أياد ,, وسيتم إرجاع القالب السابق لمدونتي يا غالي ,, علشان خاطرك

    ردحذف
  3. @AL-HAGESS.VIP
    مشكور أخي على مرورك
    @قوالب بلوجر عربية
    مرحبا أخي باسم ،شكرا لك على حضورك وتتبعك الدائم للمدونة ،أما بخصوص قالب مدونتك فلا تدع رأيي حول قالبك الجديد يجعلك تغيره ،فكما قلت لك سابقا فهي مسألة ذوق ،حيث كان القالب السابق مميز جدا وأحببته من النظرة الأولى b-(

    ردحذف
  4. عليكم السلام ورحمة الله
    اضافة رائعة بارك الله فيك وسلمت يداك
    شكرا

    ردحذف
  5. تقنيات css3 رائعة جداً لكني لا أعلم حتى الأن إن كان انترنت اكسبلورر 9 يدعمها أم لا ؟؟
    صراحة أفضل أن يستعمل الجميع الفاير فوكس فالأكسبلورر هو كارثة على المواقع :(

    جزاك الله كل خير أخي أبو إياد

    ردحذف
  6. انا كنت عايز اخلى التاثير دة مثلا يشتغل على صور معينة فى السايدربار مثلا اعمل اية يعنى مثلا عايز اضيفة للاعلانات او اقسام المدونة اكون ضايف فيها صور ارجو التوضيح ياغالى

    ردحذف
  7. @أحمد
    مرحبا أخي أحمد ، شرفت الموضوع ،كلامك صحيح المتصفح أنترنت إكسبلورر لا يعترف بهذه الإضافة مع الأسف =))،فأن لا أستعمله إطلاقا منذ زمن شكرا لك على ملاحظتك

    ردحذف
  8. إضافة رائعة أخي الكريم، سأقوم بتجربتها إن شاء الله..

    في انتظار جديدك المميز، دمت في رعاية الرحمن وحفظه

    ردحذف
  9. @كوكتيل
    نعم أخي يمكنك تطبيق التأثير على صورة معينة وفي أي مكان تريد ،أولا قم بإستبدال الكلمة post من الكود بالكلمة borders (يوجد منها إثنين) ثم بعد ذلك قم بالتوجه إلى كود الصورة التي لديك سوف تجه هذا الرمز في آخره /> قم بوضع الوسم التالي class="borders" قبل ذلك الرمز
    بالتوفيق

    ردحذف
  10. إضافة جميلة .. يعطيك العافية على المجهود

    ردحذف
  11. قمت بالبحث عن ]]

    فلم اجدها

    مامعنى هذا؟

    http://almwsoa.blogspot.com/

    ردحذف
  12. ان طلباتي لك تنفذ فورا ماشاء الله شكرا لك اخي ابو اياد على الطريقة الرائعة

    ردحذف
  13. السلام عليكم

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

    ردحذف
  14. السلام عليكم اخى ابو اياد
    جزاك الله خيرا على الاضافه الرائعه

    عندى استفسار بعيد عن الموضوع ارجو مساعدتك فيه
    مدونتى لا استطيع انشاء صفحات ثابته بسس هاك اقرأ المزيد، جربت كل طرق ازالة الهاك من الصفحات الثابته بما فيهم الموجوده فى مدونتك ولكن لا جديد
    انظر المثال: http://milanarabia.blogspot.com/p/blog-page_762.html

    هاك اقرأ المزيد عندى "معقد" شويه وليس كالهاك الاصلى الخفيف، كل ما اطلبه هى طريقه لازالته من الصفحت الثابته بدون التغير فى الهاك نفسه لان اى تغيير بسيط فيه يسبب مشاكل كثيره عندى، بحثت وحاولت كثيرا ولكن لم افلح لذا فضلت ان اسألك لعلك تتمكن من مساعدتى :((

    ردحذف
  15. @Mado ItaliaNo
    إبعث لي قالب مدونتك على خاص للمعاينة mohamed@abu-iyad.com :)

    ردحذف
  16. أزال المؤلف هذا التعليق.

    ردحذف
  17. جمييييييييييييييييل ومنتظرين جديد ك على احر من الجمر

    ردحذف
  18. اخى العزيز اطلب منك عمل تبادل اعلانى مع مدونتى
    برجاء زيارتى وابلاغى الشروط والمطلوب
    راسلنى على
    yasseresmailactor@gmail.com
    او قم بزيارة مدونتى واترك تعليقك فى
    http://firebloggertools.blogspot.com
    شكراااااا وبالتوفيق

    ردحذف
  19. @Fire Blogger Toolsمرحبا أخي الكريم ؛أولا مرحبا بك في المدونة ،ثانيا إذا كنت قد قرأت موضوع الأخير ،حيث قمت بفتح باب المشاركة بالمواضيع على مدونتي ،حيث وعدت صاحب الموضوع المميز أن يكون له مكان في المدونة مع الإعلانات ،وما دام أن مدونتك متخصصة بمجال تطوير التدوين ،يمكنك المشاركة بموضوعك وأتمنى أن تكون أنت السباق لذلك مع مراعات الشروط التي سبق ذكرها في الموضوع ،بالتوفيق:((

    ردحذف
  20. شكرا
    http://mazingworld.blogspot.com

    ردحذف
  21. اشكرك يا ابو اياد على الطريقه

    ردحذف
  22. تسلم يدينك اخوي
    زبطت معي :)

    ردحذف
  23. اخي ابو اياد
    قمت بلبحث على وسم ]]

    و لم اجده ماذا الحل

    ردحذف
  24. @محمد
    تأكد من وضعك علامة علي المربع الصغير لتوسيع القوالب

    ردحذف
  25. اخي قمت بوضع علامه على توسيع القالب و لم تظهر لي

    ردحذف
  26. الاضافة لا تعمل:)
    مع انى قد حاولت اضافتها اكثر من 10 مرات برجاء النظر فى الموضوع مره اخرى

    ردحذف
  27. :))Blogger
    موضوع رائع بارك الله فيك

    ردحذف
  28. اخي الكريم نشكرك على تقديم هذه المعلومات الرائعة و المفيدة .. احييك على الجهد و اتمنى لك المزيد من التقدم و النجاح

    ردحذف
  29. الله يعطيع العافية

    بس لما ابحث عن ]]

    مآجدها

    ردحذف
  30. يسلمو ايديك يارب على الطريقه الحلوه للصور
    انا جربتها
    ربي يعطيك الف عافية ويجزيك كل خير ويجعلة فى ميزان حسناتك
    لك تحياتي

    ردحذف
  31. شكرا اخي علي لالاضافه بس عندي مش لاقي الكود اللي موجود عندي الكود ده
    ]]>
    وجربت اعملها عليه مشتغلش

    علما بان قالب مدونتي هو قالب سما بولجر

    http://abo-zyad.blogspot.com

    ردحذف
  32. إضافة جميلة فعلاً ..
    يعطيك العافية أخ أبو أياد ...
    تحياتي

    ردحذف
  33. ;)) وين ردك ياابواياد

    ردحذف
  34. شكرا جزيلا
    تم اضافة الكود

    ردحذف
  35. شكرا بارك الله فيك

    مدونه المشاغب ابوزياد
    http://abo-zyad.blogspot.com

    ردحذف
  36. السلام عليكم ورحمة الله وبركاته

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

    شكراً

    ردحذف
  37. تسلمـ ايدك يا واد ;)

    ردحذف
  38. بورك في الجهود لكني وضعت الكود ومالت الصورة دون حركة كيف ألغي الكود

    ردحذف
  39. ]]
    لااجد الكود عندي ما الحل

    ردحذف
  40. ]]
    لا اجد الكود عندي
    ونفسي في هذه الخاصيه

    ردحذف
  41. @ابو هايدي
    إبحث عليه الآن وسوف تجده لقد كان هناك رمز ناقص وتم تصحيح الأمر

    ردحذف
  42. فعلا اضافة رائعة جدا وقد طبقتها علي ندونتي
    ارجوم من حضرتك تقييم مدونتي اذا كان هذا لا يزعجك
    smartmenandwomens.blogspot.com

    ردحذف
  43. مشكورر ابو اياد
    طبقت واصبحت تعمل على مدونتي
    لكن لي استفسار اخر
    اريد توسيط صوره راس المدونه بالوسط فما هو الكود او ماهي الطريقه لعمل ذلك ولكي مني
    كل تحيه وتقدير

    ردحذف
  44. أرجو توضيح مكان اضافه الكود

    ردحذف
  45. شكرا جزيلا

    ردحذف
  46. وااااااااو كووود روعة ، بارك الله فيك وجعله في ميزان حسناتك اخي

    ردحذف
  47. غير معرف6:34 م

    =))

    ردحذف
  48. إضافة روعة وشكراا لك

    أرجوا أن تعطيني النصائح لمدونتي
    مدونة كل شي
    http://everi-thing.blogspot.com/

    ردحذف
  49. جميلة جدا الحركة دى تسلم ايدك

    ردحذف
  50. غير معرف10:32 م

    مرحبا اخوي
    تسلم على المدونه الروعه استفدت منها كثيرر
    الاضافه روعه فعلا لكن اوجهه مشكله صعبه الان وهي
    ان الاضافه تظهر بكل المدونه يعمي حتى في الصور التي في المواضع

    تظهر ايضا اذا ممكن كود او شئ يجنب هذي الصوره هذي الاضافه
    يعين هناك بعض الصور التي لا اريدها ان تعرض بهذي الطريق هل هناك
    طريق ما ؟؟

    ردحذف
  51. رائع انا قد اضفت هادا الى مدونتي
    يمكنكم ان تروها
    www.kolxi.blogspot.com

    ردحذف
  52. جزاكم الله خيرا سأجربها بإذن الله

    ردحذف
  53. إضافه جميلة جدا
    جزاك الله خيراا :)

    ردحذف
  54. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  55. شكرا لك اخي ابو اياد بالفعل اضافة رائعة

    ردحذف
  56. شكرا لك على المجهود

    ردحذف
  57. شكر لك ياخي على هده معلومات
    انا عمر 15 سنة لديا هدا المدونة
    http://bff-4.blogspot.com/
    واريد نغير الرابط
    تغير blogspot
    انا انتظر جوابك
    بريد الاكترزني بتعاعي
    rida_jack@hotmail.com

    ردحذف
  58. http://psdunivers.com
    شكرا أخي أرجو الاطلاع على موقعي وإبداء رأيكم

    ردحذف
  59. بارك الله فيك تم التركيب

    ردحذف
  60. الق نظره على مدونتي

    http://ar-tankonline.blogspot.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية