طريقة إضافة تأثير تكبير صور مدونة بلوجر بطريقة رائعة

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

معاينة الأداة

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

1.توجه إلى لوحة التحكم الخاصة بمدونتك.

2.إضغط على قالب.

3. ثم تحريرhtml.

4.إضغط على متابعة.

5.إختار توسيع القالب

6. إبحث عن هذا الكود باستعمال Ctrl+F:

]]></b:skin>

7.قم بلصق الكود التالي "فوق" الكود السابق مباشرة :

-------- ImageEfeect -----------
.IE-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.IE-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
-------- End of ImageEffect ------

ملاحظة :

يمكنك التعديل على أبعاد التأثير من خلال تغير القيم باللون الأحمر.

8.قم بحفظ القالب.
9.الآن كل ما عليك فعله لعمل هذا التأثير لإحدى الصور هو إدراج رابط الصورة بداخل الكود التالي بهذه الطريقة:

<div class="IE-CSS3">
<img src="رابط الصورة " />
</div>

مبروك عليك.

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.