كيفية اضافة تأثير hoverالى صور على بلوجر

بسم الله الرحمان الرحيم 

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

اليوم سنشرح كيفية اضافة تأثير الى الصور حيث عند تمرير الماوس على الصور تكون الصورة في الاول مضببة نوعا ما وعند تمرير الماوس تعود الى طبيعتها :

نبدأ على بركة الله :

نتجه نحو Layout -> Edit HTML

 ثم نضغط على توسيع عناصر القالب 

ثم نبحث عن :

]]></b:skin> 

ثم نضيف قبلها :

.hovereffect img {

opacity:0.5;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity:0.5;

}

.hovereffect:hover img {

opacity:1.0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity:1;

}

ثم نضغط :

Save Template

والان لتفعيل الخاصية على صور في مدوناتكم

يجب اضافة 

class=”hovereffect”

مثال :

قبل اضافة الثاثير

<a href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a> 

بعد اضافة التأثير 

<a class="hovereffect"  href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>