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

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

يوجد الآن 37377 مشاهدة التعليقات : 22

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

سأشارككم اليوم درس لطريقة تطبيق تأثير على المواضيع ولكي أكون أكثر تحديدا فسيطبق على صندوق حامل المواضيع المثبت بالرئيسية كأي موقع آخر، هذا التأثير يخص تأثيرات Animatecss التي قدمتها في هذه التدوينة سبق منذ مدة أن أتتني طلبات لتقديم هكذا شرح وها قد أتتني الفرصة حتى أريكم الطريقة بأسهل طريقة ممكنة. والآن قبل أن ندخل للمعاينة أحب أن أذكر بأن الكود المستعمل له ميزة آخرى ألا وهي تحميل صور المواضيع في آنٍ واحد مما يوفر سرعة في تحميل الموقع وتظهر المواضيع مع نزولك للأسفل ولقد تم تجربة التأثير على كل من البوستات ذات شكل شبكة والشكل العادي وهي تشتغل تمام التمام 😴
شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
@-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'
الصورة التالية تشرح العملية :

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 22 تعليقًا:

  1. موضوع رائع اخى بتوفيق

    ردحذف
  2. موضوع رائع

    ردحذف
  3. تم التطبيق الحرفي للموضوع ونجحت معي في قالب افتراضي لبلوجر
    يمكنك مشاهدة النتيجة من هنا philo4bac.blogspot.com
    وبارك الله فيك اخي وشكراا على مواضيعك النقية ههه

    ردحذف
  4. أخي هل يمكن ان اعمل نفس التاثير على الاضافات
    وهل يمكن تغير التاثير بتاثيرات اخرى

    ردحذف
    الردود
    1. لم أجرب تشغيلها على إضافات آخرى، لكن جرب قد تعمل، ويمكن تغيير التأثير لأي إسم تأثير هنا :
      http://animatecss.ar1web.com/
      غير zoomInUp إلى إسم التأثير كما هو مكتوب في المعاينات

      حذف
  5. ممكن طريقة انشاء مثل هده النطاقات في المدونة
    مثلا مدونتك لها دومين على هدا الشكل
    www.ar1web.com
    في بعض المدونات يضيفون صفحات اخرى للدومين
    مثلا يصبح على هدا الشكل
    ads.ar1web.com
    أو
    forum.ar1web.com
    ...
    كيف يمكنني ان اضيفها
    ان كانت تضافة من الشركة المستضافة . عندي دومين شرة godaddy

    ردحذف
    الردود
    1. تابع هذه التدوينة : http://www.ar1web.com/2014/07/blog-post_10.html
      قد تكون الكثير من الأشياء تغييرت لأن جودادي وضعت تحديث للوحة التحكم إن لم ينفعك الشرح فابحث في جوجل عن حجز دومين فرعي

      حذف
  6. غير معرف9/06/2015

    تدونية جميلة بس لو سمحت عايزين شرح لكل القالب المشاركات و السايد بار والفوتر كل القالب يعني :)

    ردحذف
    الردود
    1. هذه التدوينة هي للمواضيع فقط، إذا كنت تتقن التعامل مع الأكواد فيمكنك تطبيقها من خلال هذه التدوينة:
      http://www.ar1web.com/2015/05/animatecss.html

      حذف
  7. غير معرف9/06/2015

    اخي ارجوك كيفية اضافة معلومات عن التدوينة بجانب المشاركة من الداخل

    ردحذف
  8. غير معرف9/08/2015

    اخي انت لماذا لم ترد

    ردحذف
  9. السلام عليكم و رحمة الله كيف حالك اخي حسام
    يمكنك مسح التعليق فقصدي ليس الإشهار
    هذه مدونتي

    http://www.aegygeek.com/
    قمت بتركيب سلايدر من احد المدونات
    ولكن السلايدر لا يعمل
    الان لو قمت بالضعط على زر الماوس الايسر و ضغطت على " بدل إتجاه الصفحة " السلايدر سوف يعمل
    كيف يمكنني حل هذه المشكلة
    فهو يعمل 100% و طريقة التركيب صحيحة 100% ولكن لا تظهر المواضيع إلا بعد الضغط على بدل اتجاه الصفحة
    هل يمكن مساعدتي بحل المشكلة و شكراً لك

    ردحذف
    الردود
    1. عليكم السلام أخي، حسبما رأيت فهو يعمل؟

      حذف
  10. تأخرت علي بالرد لذلك بحثت عن الحل ووجدته
    ولكن شكراً لك صديقي
    احترامي و تقديري لشخصك الكريم

    ردحذف
  11. بارك الله فيك
    اشتغلت 100% على المدونة الخاصة بي

    ردحذف
  12. تمت الإضافة وهي ناجحة

    ردحذف
  13. كيفية برمجة صفحة التدوينة فى بلوجر

    ردحذف
  14. رابط المعاينة لا يشتغل

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم