الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
سأشارككم اليوم درس لطريقة تطبيق تأثير على المواضيع ولكي أكون أكثر تحديدا فسيطبق على صندوق حامل المواضيع المثبت بالرئيسية كأي موقع آخر، هذا التأثير يخص تأثيرات 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
موضوع رائع اخى بتوفيق
ردحذفلنا ولك أخي
حذفموضوع رائع
ردحذفابدااع
ردحذفتم التطبيق الحرفي للموضوع ونجحت معي في قالب افتراضي لبلوجر
ردحذفيمكنك مشاهدة النتيجة من هنا philo4bac.blogspot.com
وبارك الله فيك اخي وشكراا على مواضيعك النقية ههه
رائع
حذفأخي هل يمكن ان اعمل نفس التاثير على الاضافات
ردحذفوهل يمكن تغير التاثير بتاثيرات اخرى
لم أجرب تشغيلها على إضافات آخرى، لكن جرب قد تعمل، ويمكن تغيير التأثير لأي إسم تأثير هنا :
حذفhttp://animatecss.ar1web.com/
غير zoomInUp إلى إسم التأثير كما هو مكتوب في المعاينات
ممكن طريقة انشاء مثل هده النطاقات في المدونة
ردحذفمثلا مدونتك لها دومين على هدا الشكل
www.ar1web.com
في بعض المدونات يضيفون صفحات اخرى للدومين
مثلا يصبح على هدا الشكل
ads.ar1web.com
أو
forum.ar1web.com
...
كيف يمكنني ان اضيفها
ان كانت تضافة من الشركة المستضافة . عندي دومين شرة godaddy
تابع هذه التدوينة : http://www.ar1web.com/2014/07/blog-post_10.html
حذفقد تكون الكثير من الأشياء تغييرت لأن جودادي وضعت تحديث للوحة التحكم إن لم ينفعك الشرح فابحث في جوجل عن حجز دومين فرعي
تدونية جميلة بس لو سمحت عايزين شرح لكل القالب المشاركات و السايد بار والفوتر كل القالب يعني :)
ردحذفهذه التدوينة هي للمواضيع فقط، إذا كنت تتقن التعامل مع الأكواد فيمكنك تطبيقها من خلال هذه التدوينة:
حذفhttp://www.ar1web.com/2015/05/animatecss.html
اخي ارجوك كيفية اضافة معلومات عن التدوينة بجانب المشاركة من الداخل
ردحذفإنتظر الشرح
حذفاخي انت لماذا لم ترد
ردحذفالسلام عليكم و رحمة الله كيف حالك اخي حسام
ردحذفيمكنك مسح التعليق فقصدي ليس الإشهار
هذه مدونتي
http://www.aegygeek.com/
قمت بتركيب سلايدر من احد المدونات
ولكن السلايدر لا يعمل
الان لو قمت بالضعط على زر الماوس الايسر و ضغطت على " بدل إتجاه الصفحة " السلايدر سوف يعمل
كيف يمكنني حل هذه المشكلة
فهو يعمل 100% و طريقة التركيب صحيحة 100% ولكن لا تظهر المواضيع إلا بعد الضغط على بدل اتجاه الصفحة
هل يمكن مساعدتي بحل المشكلة و شكراً لك
عليكم السلام أخي، حسبما رأيت فهو يعمل؟
حذفتأخرت علي بالرد لذلك بحثت عن الحل ووجدته
ردحذفولكن شكراً لك صديقي
احترامي و تقديري لشخصك الكريم
بارك الله فيك
ردحذفاشتغلت 100% على المدونة الخاصة بي
تمت الإضافة وهي ناجحة
ردحذفكيفية برمجة صفحة التدوينة فى بلوجر
ردحذفرابط المعاينة لا يشتغل
ردحذف