طريقة إضافة تأثير التحميل المسبق بواسطة css على مدونتك بلوجر

هل رأيت موقع ويب يعرض التأثير المتحركك قبل عرض الصفحة؟

نعم ، ربما تكون قد شاهدت هذا النوع من المواقع التي تعرض أداة التحميل المسبق قبل عرض محتوياتها. اليوم ، سنتعلم كيفية تثبيت التحميل المسبق على منصة بلوجر. تم تطوير هذه الأداة باستخدام CSS و HTML و jQuery. تحتاج إلى إضافة هذه الأكواد على قالب مدونتك باتباع الخطوات المذكورة هنا.

طريقة إضافة تأثير التحميل المسبق بواسطة css على مدونتك بلوجر

كيف يعمل تأثير Preloader Spinner؟

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

معاينة التأثير

أولا الصق هذا الكود فوق وسم </head> مباشرة

<style>
.sk-cube-grid{width:40px;height:40px;margin:250px auto}.sk-cube-grid .sk-cube{width:33%;height:33%;background-color:#fff;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#0088ff;z-index:1000}
#loader,#loader2{display:none}
#loader{display:unset}
</style>

الصق الكود التالي أسفل وسم <body> مباشرة

<!--Preloaders Start-->
<div id='loader'>
<div class='sk-cube-grid'>
<div class='sk-cube sk-cube1'></div>
<div class='sk-cube sk-cube2'></div>
<div class='sk-cube sk-cube3'></div>
<div class='sk-cube sk-cube4'></div>
<div class='sk-cube sk-cube5'></div>
<div class='sk-cube sk-cube6'></div>
<div class='sk-cube sk-cube7'></div>
<div class='sk-cube sk-cube8'></div>
<div class='sk-cube sk-cube9'></div>
</div>
</div>
<div id='loader2'>
<div CLASS='wrap'>
<div CLASS='bg'>
<div CLASS='loading'>
<span CLASS='title'>جاري تحميل ...</span>
<span CLASS='text'>موقع تقني واي</span>
</div>
</div>
</div>
</div>
<!--Preloaders End-->

الآن ابحث عن </body> وأضف الكود التالي فوقه مباشرة

<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".sk-cube-grid").fadeOut("slow"),setTimeout(function(){$("#loader").fadeOut("slow")},1e3)},1e3)});
</script>

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

لا توجد تعليقات حتى الآن "طريقة إضافة تأثير التحميل المسبق بواسطة css على مدونتك بلوجر"

إرسال تعليق

ملاحظة للجميع

يمكنك وضع تعليق بصورة أو فيديو YouTube أو Vimeo.
المرجو ترك تعليق يتعلق بنفس هذا الموضوع.
لا يجوز الترويج للسلع أو البيع.
لا تقم بتضمين روابط مشبوهة في التعليقات.
سيتم حذف التعليقات ذات الروابط السبام تلقائيًا
*علق بشكل جيد ، شخصيتك تنعكس عند التعليق.