السلام عليكم ورحمة الله تعالى وبركاته ،سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات على الصور وهي الخاصية نفسها التي أضعها علي جميع صور مدونتي ،هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ،كنت أستعمل هذه الخاصية في مدونتي منذ زمن حيث كان يلزمني إضافة بعض الأكواد مع رابط الصورة التي أريد أن أعمل لها هذا التأثير وتتكرر العملية مع كل إضافة للصور ،لكنني بعد جهد شخصي تمكنت من صنع كود يتم إضافته مرة واحدة للقالب ويتم تفعيل خاصية التأثير علي جميع الصور بدون إستثناء ،وأعني بالذكر أن صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ,والآن لنتوجه لتطبيق الكود.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
ثم قم بوضع الكود التالي قبله
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
]]></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);
}
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .
مشكوووور جدا ابو اياد
ردحذفحزاك الله خير :)
رائع جدا أخي الغالي ابو أياد ,, وسيتم إرجاع القالب السابق لمدونتي يا غالي ,, علشان خاطرك
ردحذف@AL-HAGESS.VIP
ردحذفمشكور أخي على مرورك
@قوالب بلوجر عربية
مرحبا أخي باسم ،شكرا لك على حضورك وتتبعك الدائم للمدونة ،أما بخصوص قالب مدونتك فلا تدع رأيي حول قالبك الجديد يجعلك تغيره ،فكما قلت لك سابقا فهي مسألة ذوق ،حيث كان القالب السابق مميز جدا وأحببته من النظرة الأولى b-(
عليكم السلام ورحمة الله
ردحذفاضافة رائعة بارك الله فيك وسلمت يداك
شكرا
انا كنت عايز اخلى التاثير دة مثلا يشتغل على صور معينة فى السايدربار مثلا اعمل اية يعنى مثلا عايز اضيفة للاعلانات او اقسام المدونة اكون ضايف فيها صور ارجو التوضيح ياغالى
ردحذف@أحمد
ردحذفمرحبا أخي أحمد ، شرفت الموضوع ،كلامك صحيح المتصفح أنترنت إكسبلورر لا يعترف بهذه الإضافة مع الأسف =))،فأن لا أستعمله إطلاقا منذ زمن شكرا لك على ملاحظتك
إضافة رائعة أخي الكريم، سأقوم بتجربتها إن شاء الله..
ردحذففي انتظار جديدك المميز، دمت في رعاية الرحمن وحفظه
إضافة جميلة .. يعطيك العافية على المجهود
ردحذف@م. خالد:-L
ردحذفان طلباتي لك تنفذ فورا ماشاء الله شكرا لك اخي ابو اياد على الطريقة الرائعة
ردحذفالسلام عليكم
ردحذفجزاك الله كل خير... بجد إضافة رائعة جدا ابحث عنها منذ فترة.. والأجمل موضوع الكود الواحد.. سعيد جدا بهذه الإضافة.. جربتها واشتغلت مباشرة..
ربنا يكرمك ويبارك في جهودك ويجعلها في ميزان حسناتك... وليست هذه المرة الأولى التي أستفيد فيها من مدونتك..
تحياتي أخي الكريم.
@Mado ItaliaNo
ردحذفإبعث لي قالب مدونتك على خاص للمعاينة mohamed@abu-iyad.com :)
جمييييييييييييييييل ومنتظرين جديد ك على احر من الجمر
ردحذفاشكرك يا ابو اياد على الطريقه
ردحذفتسلم يدينك اخوي
ردحذفزبطت معي :)
اخي ابو اياد
ردحذفقمت بلبحث على وسم ]]
و لم اجده ماذا الحل
@محمد
ردحذفتأكد من وضعك علامة علي المربع الصغير لتوسيع القوالب
اخي قمت بوضع علامه على توسيع القالب و لم تظهر لي
ردحذفالاضافة لا تعمل:)
ردحذفمع انى قد حاولت اضافتها اكثر من 10 مرات برجاء النظر فى الموضوع مره اخرى
:))Blogger
ردحذفموضوع رائع بارك الله فيك
اخي الكريم نشكرك على تقديم هذه المعلومات الرائعة و المفيدة .. احييك على الجهد و اتمنى لك المزيد من التقدم و النجاح
ردحذفاخوي ماقصرت
ردحذف:-*
ردحذفالله يعطيع العافية
ردحذفبس لما ابحث عن ]]
مآجدها
يسلمو ايديك يارب على الطريقه الحلوه للصور
ردحذفانا جربتها
ربي يعطيك الف عافية ويجزيك كل خير ويجعلة فى ميزان حسناتك
لك تحياتي
إضافة جميلة فعلاً ..
ردحذفيعطيك العافية أخ أبو أياد ...
تحياتي
;)) وين ردك ياابواياد
ردحذفشكرا جزيلا
ردحذفتم اضافة الكود
@الشعلـ إيمان ـة
ردحذفشكرا جزيلا
تم اضافة الكود
السلام عليكم ورحمة الله وبركاته
ردحذفحسناً، لتسجل إني مررت من هنا
واستفدت من درس واضافة حركة الصور بالمدونة..
رائعة رأيتها أول مرة عند بنت بلادي اميرة الأمل..
واعجبتني ..
وطبعاً مازلت متواجدة ولدي ماشاء الله الكثير
من الاشياء المهمة لكي اتعلمها منك سيدي...
جزاك الله خيراً
شكراً
تسلمـ ايدك يا واد ;)
ردحذفبورك في الجهود لكني وضعت الكود ومالت الصورة دون حركة كيف ألغي الكود
ردحذف]]
ردحذفلااجد الكود عندي ما الحل
]]
ردحذفلا اجد الكود عندي
ونفسي في هذه الخاصيه
@ابو هايدي
ردحذفإبحث عليه الآن وسوف تجده لقد كان هناك رمز ناقص وتم تصحيح الأمر
فعلا اضافة رائعة جدا وقد طبقتها علي ندونتي
ردحذفارجوم من حضرتك تقييم مدونتي اذا كان هذا لا يزعجك
smartmenandwomens.blogspot.com
مشكورر ابو اياد
ردحذفطبقت واصبحت تعمل على مدونتي
لكن لي استفسار اخر
اريد توسيط صوره راس المدونه بالوسط فما هو الكود او ماهي الطريقه لعمل ذلك ولكي مني
كل تحيه وتقدير
أرجو توضيح مكان اضافه الكود
ردحذفشكرا جزيلا
ردحذفوااااااااو كووود روعة ، بارك الله فيك وجعله في ميزان حسناتك اخي
ردحذفTHX AGAIN BROTHER
ردحذف