انشاء خريطة مدونةعام

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

اضافة  تأثير على صورة الموضوع , اهلا بكم زوار مدونتي بعد بحث كثير وجدة طريقة تطبيق تأثير على صورة الموضوع.

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

واردت ان اشارككم اياه ولكي أكون أكثر تحديدا فسيطبق على صندوق حامل المواضيع المثبت بالرئيسية كأي موقع آخر،
 هذا التأثير يخص تأثيرات 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- مبروك عليك الإضافة .

Sory Mohajer

Sory Mohajer مدير موقع EXE and APK التدوين هوايتي أنضممت لعالم التقنية منذ عام 2014 في الوقت الحالي أحاول قدر المسطاع تأمين أكبر عدد للتراخيص وأجدد المقالات بشكل دوري حتى وصلت عددها الى اكثر من 3500 مقالة متنوعة تحتوي برامج وتطبيقات مع شروحات سيو لتحسين الموقع وكل هذا بمجهود شخصي .

مقالات ذات صلة

Loading...
زر الذهاب إلى الأعلى