السلام عليكم ورحمة الله تعالى وبركاته ،سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات على الصور وهي الخاصية نفسها التي أضعها علي جميع صور مدونتي ،هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ،كنت أستعمل هذه الخاصية في مدونتي منذ زمن حيث كان يلزمني إضافة بعض الأكواد مع رابط الصورة التي أريد أن أعمل لها هذا التأثير وتتكرر العملية مع كل إضافة للصور ،لكنني بعد جهد شخصي تمكنت من صنع كود يتم إضافته مرة واحدة للقالب ويتم تفعيل خاصية التأثير علي جميع الصور بدون إستثناء ،وأعني بالذكر أن صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ,والآن لنتوجه لتطبيق الكود.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ثم قم بلصق هذا الكود قبله مباشرة :]]</b:skin>
يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة ..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);
}
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
37 التعليقات:
مشكوووور جدا ابو اياد
حزاك الله خير :)
رائع جدا أخي الغالي ابو أياد ,, وسيتم إرجاع القالب السابق لمدونتي يا غالي ,, علشان خاطرك
@AL-HAGESS.VIP
مشكور أخي على مرورك
@قوالب بلوجر عربية
مرحبا أخي باسم ،شكرا لك على حضورك وتتبعك الدائم للمدونة ،أما بخصوص قالب مدونتك فلا تدع رأيي حول قالبك الجديد يجعلك تغيره ،فكما قلت لك سابقا فهي مسألة ذوق ،حيث كان القالب السابق مميز جدا وأحببته من النظرة الأولى b-(
عليكم السلام ورحمة الله
اضافة رائعة بارك الله فيك وسلمت يداك
شكرا
تقنيات css3 رائعة جداً لكني لا أعلم حتى الأن إن كان انترنت اكسبلورر 9 يدعمها أم لا ؟؟
صراحة أفضل أن يستعمل الجميع الفاير فوكس فالأكسبلورر هو كارثة على المواقع :(
جزاك الله كل خير أخي أبو إياد
انا كنت عايز اخلى التاثير دة مثلا يشتغل على صور معينة فى السايدربار مثلا اعمل اية يعنى مثلا عايز اضيفة للاعلانات او اقسام المدونة اكون ضايف فيها صور ارجو التوضيح ياغالى
@أحمد
مرحبا أخي أحمد ، شرفت الموضوع ،كلامك صحيح المتصفح أنترنت إكسبلورر لا يعترف بهذه الإضافة مع الأسف =))،فأن لا أستعمله إطلاقا منذ زمن شكرا لك على ملاحظتك
إضافة رائعة أخي الكريم، سأقوم بتجربتها إن شاء الله..
في انتظار جديدك المميز، دمت في رعاية الرحمن وحفظه
إضافة جميلة .. يعطيك العافية على المجهود
@م. خالد:-L
قمت بالبحث عن ]]
فلم اجدها
مامعنى هذا؟
http://almwsoa.blogspot.com/
ان طلباتي لك تنفذ فورا ماشاء الله شكرا لك اخي ابو اياد على الطريقة الرائعة
السلام عليكم
جزاك الله كل خير... بجد إضافة رائعة جدا ابحث عنها منذ فترة.. والأجمل موضوع الكود الواحد.. سعيد جدا بهذه الإضافة.. جربتها واشتغلت مباشرة..
ربنا يكرمك ويبارك في جهودك ويجعلها في ميزان حسناتك... وليست هذه المرة الأولى التي أستفيد فيها من مدونتك..
تحياتي أخي الكريم.
السلام عليكم اخى ابو اياد
جزاك الله خيرا على الاضافه الرائعه
عندى استفسار بعيد عن الموضوع ارجو مساعدتك فيه
مدونتى لا استطيع انشاء صفحات ثابته بسس هاك اقرأ المزيد، جربت كل طرق ازالة الهاك من الصفحات الثابته بما فيهم الموجوده فى مدونتك ولكن لا جديد
انظر المثال: http://milanarabia.blogspot.com/p/blog-page_762.html
هاك اقرأ المزيد عندى "معقد" شويه وليس كالهاك الاصلى الخفيف، كل ما اطلبه هى طريقه لازالته من الصفحت الثابته بدون التغير فى الهاك نفسه لان اى تغيير بسيط فيه يسبب مشاكل كثيره عندى، بحثت وحاولت كثيرا ولكن لم افلح لذا فضلت ان اسألك لعلك تتمكن من مساعدتى :((
@Mado ItaliaNo
إبعث لي قالب مدونتك على خاص للمعاينة mohamed@abu-iyad.com :)
جمييييييييييييييييل ومنتظرين جديد ك على احر من الجمر
@Fire Blogger Toolsمرحبا أخي الكريم ؛أولا مرحبا بك في المدونة ،ثانيا إذا كنت قد قرأت موضوع الأخير ،حيث قمت بفتح باب المشاركة بالمواضيع على مدونتي ،حيث وعدت صاحب الموضوع المميز أن يكون له مكان في المدونة مع الإعلانات ،وما دام أن مدونتك متخصصة بمجال تطوير التدوين ،يمكنك المشاركة بموضوعك وأتمنى أن تكون أنت السباق لذلك مع مراعات الشروط التي سبق ذكرها في الموضوع ،بالتوفيق:((
اشكرك يا ابو اياد على الطريقه
تسلم يدينك اخوي
زبطت معي :)
اخي ابو اياد
قمت بلبحث على وسم ]]
و لم اجده ماذا الحل
@محمد
تأكد من وضعك علامة علي المربع الصغير لتوسيع القوالب
اخي قمت بوضع علامه على توسيع القالب و لم تظهر لي
الاضافة لا تعمل:)
مع انى قد حاولت اضافتها اكثر من 10 مرات برجاء النظر فى الموضوع مره اخرى
:))Blogger
موضوع رائع بارك الله فيك
اخي الكريم نشكرك على تقديم هذه المعلومات الرائعة و المفيدة .. احييك على الجهد و اتمنى لك المزيد من التقدم و النجاح
اخوي ماقصرت
:-*
الله يعطيع العافية
بس لما ابحث عن ]]
مآجدها
يسلمو ايديك يارب على الطريقه الحلوه للصور
انا جربتها
ربي يعطيك الف عافية ويجزيك كل خير ويجعلة فى ميزان حسناتك
لك تحياتي
إضافة جميلة فعلاً ..
يعطيك العافية أخ أبو أياد ...
تحياتي
;)) وين ردك ياابواياد
شكرا جزيلا
تم اضافة الكود
@الشعلـ إيمان ـة
شكرا جزيلا
تم اضافة الكود
شكرا بارك الله فيك
مدونه المشاغب ابوزياد
http://abo-zyad.blogspot.com
السلام عليكم ورحمة الله وبركاته
حسناً، لتسجل إني مررت من هنا
واستفدت من درس واضافة حركة الصور بالمدونة..
رائعة رأيتها أول مرة عند بنت بلادي اميرة الأمل..
واعجبتني ..
وطبعاً مازلت متواجدة ولدي ماشاء الله الكثير
من الاشياء المهمة لكي اتعلمها منك سيدي...
جزاك الله خيراً
شكراً
تسلمـ ايدك يا واد ;)
بورك في الجهود لكني وضعت الكود ومالت الصورة دون حركة كيف ألغي الكود