صفحة اعادة توجيه الروابط لمدونات بلوجر مع العداد و الربح منها

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

الصور تحيي المحتوى في كل موقع وأيضا تعمل على إهتمام الزائر وأهمية الصور 

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

لها تأثير كبير وتعطي جمالية أكثر ألاحظ إضافات عادية ومتكررة

هذا ليس موضوعنا على أي حال فنحن نقدم لكم الأفضل والحصري وتقتصر 

إضافتنا اليوم على تأثير الصور سوى بالمواضيع أو غيرها

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

تسمى تأثيرات Hover سأقدم لكم إثنين تأثييرين سهلين الإستعمال تأثيرات الهوفر 

تطبق أغلبية على صور التدوينات كما بمدونة محترف التقنية عند مرور الماوس 

على الصورة تظهر خلفية شفافة ولكي أعطيكم مثال على التأثيرين 

أترككم للمعاينة ضع المؤشر على الصوره

الشكل الاول الشكل الثانى

طريقة التركيب

1. أذهب الى المدونة التي تريد التعديل عليها
2. وثم توجه الى المظهر ولا تنسى أن تحتفظ بنسخه إحتياطيه
3. ثم أضغط على تعديل HTML
4. ثم أضغط ctrl + f
5. ثم أبحث عن الوسم ]]></b:skin>
6. وضع الكود التالي فوقه مباشرة

الشكل الأول

.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