اضافة تأثير على صورة الموضوع مع صندوق في التدوينة - EXE and APK اضافة تأثير على صورة الموضوع مع صندوق في التدوينة | EXE and APK

اضافة تأثير على صورة الموضوع مع صندوق في التدوينة

شارك:

اضافة تأثير على صورة الموضوع مع صندوق في التدوينة #اضافة, #صورة, #الموضوع, #مدونة,

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

اضافة  تأثير على صورة الموضوع مع صندوق في التدوينة

المعاينة موجودة في صورة الموضوع
شرح طريقة التركيب:

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

@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp} .animated { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; }

2- ابحث عن </body> وضع الكود التالي فوقه مباشرة .
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<script type="text/javascript">
      //<![CDATA[
(function(){var a,b=function(a,b){return function(){return a.apply(b,arguments)}};a=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in a)d=a[c],null!=d&&(b[c]=d);return b},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a}(),this.WOW=function(){function c(a){null==a&&(a={}),this.scrollCallback=b(this.scrollCallback,this),this.scrollHandler=b(this.scrollHandler,this),this.start=b(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults)}return c.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0},c.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():document.addEventListener("DOMContentLoaded",this.start)},c.prototype.start=function(){var a,b,c,d;if(this.boxes=this.element.getElementsByClassName(this.config.boxClass),this.boxes.length){if(this.disabled())return this.resetStyle();for(d=this.boxes,b=0,c=d.length;c>b;b++)a=d[b],this.applyStyle(a,!0);return window.addEventListener("scroll",this.scrollHandler,!1),window.addEventListener("resize",this.scrollHandler,!1),this.interval=setInterval(this.scrollCallback,50)}},c.prototype.stop=function(){return window.removeEventListener("scroll",this.scrollHandler,!1),window.removeEventListener("resize",this.scrollHandler,!1),null!=this.interval?clearInterval(this.interval):void 0},c.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},c.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),a.setAttribute("style",this.customStyle(b,d,c,e))},c.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.setAttribute("style","visibility: visible;"));return e},c.prototype.customStyle=function(a,b,c,d){var e;return e=a?"visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;":"visibility: visible;",b&&(e+="-webkit-animation-duration: "+b+"; -moz-animation-duration: "+b+"; animation-duration: "+b+";"),c&&(e+="-webkit-animation-delay: "+c+"; -moz-animation-delay: "+c+"; animation-delay: "+c+";"),d&&(e+="-webkit-animation-iteration-count: "+d+"; -moz-animation-iteration-count: "+d+"; animation-iteration-count: "+d+";"),e},c.prototype.scrollHandler=function(){return this.scrolled=!0},c.prototype.scrollCallback=function(){var a;return this.scrolled&&(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),!this.boxes.length)?this.stop():void 0},c.prototype.offsetTop=function(a){var b;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},c.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+this.element.clientHeight-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},c.prototype.util=function(){return this._util||(this._util=new a)},c.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},c}()}).call(this);
// WOW
 new WOW(
  { offset: 100 }
 ).init();


      //]]></script></b:if></b:if>



3- نأتي للمرحلة الأخيرة إبحث عن <b:includable id='post' var='post'> ستجد بجانبه سهم إضغط عليه,
 بأول الكود الذي أسفله ستجد كلمة تشبهه هذه class='post hentry' قد تجد كتابة معها لا تقلق ذلك لن يشكل فارقا المهم 
أضف هذه الكتابة wow zoomInUp' data-wow-duration='0.6s في داخل ' ' بحيث ستصبح هكذا :

class='post hentry wow zoomInUp' data-wow-duration='0.6s'

4- مبروك عليك الإضافة .

تعليقات

الاسم

الأكواد السرية,284,الربح من الانترنت,177,ألعاب,68,الفيسبوك,78,القنوات التلفزية,75,الكتب الالكترونية,171,انشاء خريطة مدونة,152,برامج البورتابل,199,برامج الطبيعة,13,برامج حماية,253,برامج فيديو,420,برامج مهمة,994,تصميم شعار,307,تطبيقات اندرويد,211,تعريفات,56,جديد,344,صيانة,575,مراجعة هواتف,159,ويندوز,23,
rtl
item
EXE and APK: اضافة تأثير على صورة الموضوع مع صندوق في التدوينة
اضافة تأثير على صورة الموضوع مع صندوق في التدوينة
اضافة تأثير على صورة الموضوع مع صندوق في التدوينة #اضافة, #صورة, #الموضوع, #مدونة,
https://1.bp.blogspot.com/-SYkrqYyhixQ/WmX7FyUMx9I/AAAAAAAATW0/BgVcMY5778Ul_BZAePHteu8wzThR0hByQCLcBGAs/s320/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%2B%2B%25D8%25AA%25D8%25A3%25D8%25AB%25D9%258A%25D8%25B1%2B%25D8%25B9%25D9%2584%25D9%2589%2B%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9%2B%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D8%25B6%25D9%2588%25D8%25B9%2B%25D9%2585%25D8%25B9%2B%25D8%25B5%25D9%2586%25D8%25AF%25D9%2588%25D9%2582%2B%25D9%2581%25D9%258A%2B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25AF%25D9%2588%25D9%258A%25D9%2586%25D8%25A9.png
https://1.bp.blogspot.com/-SYkrqYyhixQ/WmX7FyUMx9I/AAAAAAAATW0/BgVcMY5778Ul_BZAePHteu8wzThR0hByQCLcBGAs/s72-c/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9%2B%2B%25D8%25AA%25D8%25A3%25D8%25AB%25D9%258A%25D8%25B1%2B%25D8%25B9%25D9%2584%25D9%2589%2B%25D8%25B5%25D9%2588%25D8%25B1%25D8%25A9%2B%25D8%25A7%25D9%2584%25D9%2585%25D9%2588%25D8%25B6%25D9%2588%25D8%25B9%2B%25D9%2585%25D8%25B9%2B%25D8%25B5%25D9%2586%25D8%25AF%25D9%2588%25D9%2582%2B%25D9%2581%25D9%258A%2B%25D8%25A7%25D9%2584%25D8%25AA%25D8%25AF%25D9%2588%25D9%258A%25D9%2586%25D8%25A9.png
EXE and APK
https://www.exe-apk.com/2018/02/Add-effect-the-subject-image.html
https://www.exe-apk.com/
https://www.exe-apk.com/
https://www.exe-apk.com/2018/02/Add-effect-the-subject-image.html
true
623171582290320563
UTF-8
تحميل جميع المشاركات لم يتم العثور على المقالة عرض الكل قراءة المزيد رد إلغاء الرد حذف بواسطة الصفحة الرئيسية صفحات المشاركات عرض الكل مقالات ربما تهمك أيضاً وسم أرشيف بحث جميع المشاركات لم يتم العثور على أي مشاركة تطابق مع طلبك العودة إلى الرئيسية الأحد الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت الأحد الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec في هذة اللحظة منذ 1 دقيقة $$1$$ minutes ago منذ 1 ساعة $$1$$ hours ago الأمس $$1$$ days ago $$1$$ weeks ago منذ أكثر من 5 أسابيع متابعون إتبع THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network نسخ كل رمز اختر كل الكود تم نسخ جميع الرموز إلى الحافظة الخاصة بك لا يمكن نسخ الرموز / النصوص ، يرجى الضغط على [CTRL] + [C] (أو CMD + C مع Mac) لنسخ