18‏/08‏/2014

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

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع الكود التالي فوقه

الشكل الأول


.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

الشكل الثاني


.post-body img {
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
    margin-top: 2px;
}
* بمجرد إختيار الشكل ووضعه في القالب يمكنك حفظ العمل وسيطبق التأثير على صور التدوينات يمكنك أيضا تطبيق التأثير على عنصر أخر مثل السيدبار بتغير : post-body img. إلى #sidebar img

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

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع الكود التالي فوقه

الشكل الأول


.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

الشكل الثاني


.post-body img {
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
    margin-top: 2px;
}
* بمجرد إختيار الشكل ووضعه في القالب يمكنك حفظ العمل وسيطبق التأثير على صور التدوينات يمكنك أيضا تطبيق التأثير على عنصر أخر مثل السيدبار بتغير : post-body img. إلى #sidebar img

لمن واجهته مشكلة أو لا يعلم شيئا فباب التعليقات مفتوح للجميع نلتقي مع إضافة أخرى
18 Blogger تعليقات
Disqus
18 التعليقات
المشرف
avatar
المشرف
avatar

العفو أخي

المشرف
avatar
المشرف
avatar
المشرف
avatar

شكرا لك أخي والله نستفيد منك كثيرا واصل

المشرف
avatar

شكرا لك أيضا على التشجيع

المشرف
avatar

لم أجِد هذا الكود للأسف : ]]>
قوالب مدوناتي الثلاثة كلها لا تحوي هذا الكود :(
هل هنالك طريقةٌ اُخرى يا ترى ؟

المشرف
avatar

ضروري أن يكون موجود إذا كنت تستعمل قالب بلوجر ابحث فقط عن skin وسيظهر لك بجانب الأرقام ستجد سهم إضغط عليه بعدها ابحث مجددا وستجده

المشرف
avatar

ممم، أظن أن القالب غير داعم لهذه الخاصية، على أيةِ حال
شكراً على الإضافة الجميلة، إن شاء الله تضع لنا دروساً أكثر
مع إضافات تغيير خاصيات البحث بشكل أكثر تطور .. إلخ،
أحب دروسكَ و أحبكَ، شكراً لكَ <3

المشرف
avatar
Yahia Absi 2/14/2015
delete

اخي انا عملت تعليقات disqus لكن التعليقات القديمة اختفت رغم انني استوردتها في disqus

المشرف
avatar

ممكن لو شمحت كود شاهد ايضا مثل اللى عندك دا لو مفيش مانع حضرتك

المشرف
avatar

ممكن لو سمحت كود شاهد ايضا مثل اللى عندك ارجوك رد

المشرف
avatar

لا يمكن أن تستعمل كِلا الشكلين إلا في حالة منطقة معينة لكل شكل

المشرف
avatar

شكرا إضافة رائعة لنلأمل الإضافات الأخرى ان لا يكون بها مشاكلههههههه لانو هناك بعض المواقع تعطينا اكواد يكون فيها خلل ما

المشرف
avatar

العفو اختي، في الواقع قد تكون الإضافات تشتغل 100% لكن لا تتوافق مع القالب... لأسباب ترجع في التركيب أو نقص شيء فقط
أتمنى أن تشتغل معك اضافاتنا

المشرف
avatar

اصتطيع ان افعل كلا التاثيرين في نفس الوقت

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة