للبحـث بداخـل المدونــة . . .

الصفحة الرئيسية
اضافات بلوجر
شروحات بلوجر

التحميل المسبق لمدونات بلوجر (Preloader)

تأثير التحميل المسبق لمدونات بلوجر
Estimated read time: 3 min


تركيب تأثير التحميل المسبق على قوالب بلوجر (Preloader)


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

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

لتنفيذه في بلوجر، يمكن استخدام أكواد CSS وJavaScript اقدم لكم هذه الاضافة بتصميم متوافق مع جميع الأجهزة، ستحصل على تجربة مستخدم محسنة تعكس احترافيتك واهتمامك بتفاصيل مدونتك.
طريقة تركيب اضافة تأثير التحميل المسبق على قوالب بلوجر (Preloader)

نذهب الى المظهر ثم اختيار تعديل HTML

ثم نبحث عن <body> و نضيف الأكواد التالية اسفلها

<style>

#page-loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #fff url(&#39;https://i.imgur.com/pMky3Ae.gif&#39;) no-repeat center center;z-index: 999999;display: flex;justify-content: center;align-items: center;}

.content {padding: 20px;text-align: center;}

</style>

<div id='page-loader'/>

<script>

// عرض صفحة التحميل عند فتح الصفحة

document.getElementById(&#39;page-loader&#39;).style.display = &#39;flex&#39;;

// إخفاء صفحة التحميل بعد 3 ثواني

setTimeout(function() {

document.getElementById(&#39;page-loader&#39;).style.display = &#39;none&#39;;

}, 3000); // 3000 مللي ثانية = 3 ثواني

</script>


التعديلات



يمكن اختيار العديد من تاثيرات التحميل و هنا اقدم لكم مجموعة يمكن اختيار التاثير اللذي تريد



https://i.imgur.com/ezgFJ2Q.gif


https://i.imgur.com/XlrT2jD.gif


https://i.imgur.com/EiykxFE.gif


https://i.imgur.com/IW75u8l.gif


https://i.imgur.com/jxNgmHn.gif


https://i.imgur.com/6ylSJjY.gif


https://i.imgur.com/f1dy24p.gif


https://i.imgur.com/R1OQoxx.gif


https://i.imgur.com/bhDg0Yz.gif


https://i.imgur.com/pMky3Ae.gif


https://i.imgur.com/IBOoXeO.gif


ستجد بداخل الـ CSS https://i.imgur.com/pMky3Ae.gif قم بتغيره بأحد الخيارات التي تناسبك

ملاحظة
يمكنك تصميم للوغو مدونتك مثلا ثم قم برفعه على احد مواقع الرفع و ثم استخدم رابط الصورة
على انه اذا كان التصميم متحرك اختار تصديره gif و اذا صورة png أو jpg




و في الختام لا تنسى الاشتراك بالمدونة و قناتنا على يوتيوب






صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم
#اضافات بلوجر #شروحات بلوجر

إرسال تعليق

✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. ممنوع إضافة روابط خارجية في التعليقات و شكرا لتفهمك
ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.
ar ar