خمسة تأثيرات مذهلة على صور مدونتك .. لا تفوتك

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

يمكنك معاينة التأثيرات من هنا (مدونة تجريبية).

والأن اذا أعجبتك طريقة عرض الصور يمكنك الحصول عليها باتباع الخطوات:

1- أدخل على لوحة التحكم ثم إلى القالب Template

2- اختر تحرير Edit HTML

3- ابحث Ctrl + F عن </head> وضع فوقها أو قبلها ذلك الكود

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/><script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/><script type='text/javascript'>/*<![CDATA[*/jQuery(function($pice){$pice('.effect1').adipoli({'startEffect' : 'normal','hoverEffect' : 'popout'});$pice('.effect2').adipoli({'startEffect' : 'overlay','hoverEffect' : 'sliceDown'});$pice('.effect3').adipoli({'startEffect' : 'transparent','hoverEffect' : 'boxRandom'});$pice('.effect4').adipoli({'startEffect' : 'overlay','hoverEffect' : 'foldLeft'});$pice('.effect5').adipoli({'startEffect' : 'transparent','hoverEffect' : 'boxRainGrowReverse'});
});/*]]>*/
</script>

4- ابحث Ctrl + F عن  ]]></b:skin> وضع فوقها أو قبلها ذلك الكود

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

5- قم بحفظ القالب Save Template

6- لإضافة التأثيرات على الصور ستستخدم هذا الكود 

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytf6Wzai_4kJd7FRbKSvKlm9ZhicA0pcFQqss_hZ_88dyClvB5jAY6IzGC54VBf9l_8INVOLu9cVeeZleEnUeboE8ExkHa16mnGECTt73J6UE8BbFTTKiOY8O9Uv3VMLAHFHzSwWkEA/h120/baner+abu+iyad.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytf6Wzai_4kJd7FRbKSvKlm9ZhicA0pcFQqss_hZ_88dyClvB5jAY6IzGC54VBf9l_8INVOLu9cVeeZleEnUeboE8ExkHa16mnGECTt73J6UE8BbFTTKiOY8O9Uv3VMLAHFHzSwWkEA/h120/baner+abu+iyad.png" /></a>

- قم بتغيير الرابط الملون بالأحمر إلى رابط الصورة التى تريد إضافة التأثير لها

- قم بتغييرالرقم الملون بالأزرق بالتأثير المناسب لك بحيث يمكنك تغييرها إلى 2 أو 3 أو 4 أو 5 . قم بتجربة التأثيرات الخمسة والمفضل لديك استخدمه. 

بانتظار تعليقاتكم واستفساراتكم.