-->

اضافة تاثير التحميل لمدونات بلوجر 2021

متابعي مدونة عبدوش ويب سوف نشرح لكم كيفية اضافة تاثير التحميل او ما يعرف بي Loading spinner هو صفحة تظهر مع بداية تحميل الموقع تظهر لمدة ملى من الثوان وبعدها تختفي وفي هذا الوقت يظل المحتوى الخاص بالموقع غير مرئي مما يساعد على تحميل محتوى الموقع وجميع الاضافاات التي على الموقع وكذلك جميع الاعلانات كما انها تعطى جاذبية للموقع .

كيفية اضافة تاثير التحميل لمدونات بلوجر

كيفية اضافة تاثير التحميل 

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

مميزات اضافة تاثير التحميل

 

  1. الاضافة تعمل على جميع القوالب
  2. امكانية التشغيل و الايقاف من التخطيط فقط
  3. امكانية تخصيص الاضافة وتغير الالوان 
  4. اضافة خفيفة لا تؤثر على سرعة الموقع
  5. سهولة التخصيص على الاضافة 
  6. ظهور الاعلانات بشكل اسرع
 

طريقة تركيب اضافة تاثير التحميل

 
  1. قم بتسجيل حسابك ثم اذهب الى منصة بلوجر dashboard
  2. انتقل الى المظهر >> اضغط على تحرير HTML 
  3. قم بالضغط على Ctrl + F للبحث داخل الاكواد
  4. اضغط على Ctrl + C لنسخ الاكواد
  5. واضغط على Ctrl + V للصق لاكواد
  6. قم بوضع الكود الاول فوق الوسم /b:section
  7. قم بوضع الكو الثاني تحت الوسم <body>
  8. قم بوضع الاسكربت الخاص بشتغيل الاضافة فوق الوسم /body
هذه هي خطوات تركيب اضافة تاثير التحميل لمدونات بلوجر تابع الشرح حتى النهاية لتفهم التفاصيل وطريقة تركيب الاضافة بدون اخطاء   
قمنا بتصميم اضافة تاثير التحميل على شكلين قم باختيار الشكل الذي يناسبك او الشكل الذي يعجبك بعد ذلك قم بالبحث عن الوسم /b:section و قم بوضع كود واحد من الاشكال التالية فوق الوسم السابق ستجده مكرر عدة مرات ضعه فوق اي واحد تستطيع تغير مكان الاداة من التخطيط كذلك تستطيع التحكم في تشغيل وايقاف الاضافة من التخطيط عن طريق القيمة true وهذا يعني ان الاضافة تعمل ولايقاف الاضافة قم بتغيرها الى القيمة false علما بان القيمة الافتراضية للاداة هي true اي ان الاضافة تعمل .

الشكل الاول

<b:widget id='HTML927' locked='true' title='اداة تاثير التحميل' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
 <b:if cond='data:content == &quot;true&quot;'>
&lt;style&gt;
#af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.af-sp{width:42px;height:42px;clear:both;margin:20px auto}.af-sp-wave{border-radius:50%;position:relative;opacity:1}.af-sp-wave:before,.af-sp-wave:after{content:&#39;&#39;;border:2px #2193b2 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
&lt;/style&gt;
          </b:if>
        </b:includable>
  </b:widget>

الشكل الثاني 

<b:widget id='HTML927' locked='true' title='(2) تاثير التحميل ' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
 <b:if cond='data:content == &quot;true&quot;'>
&lt;style&gt;
 
#af-preloader{display:flex;position:fixed;left:0;right:0;background-color:#ffffff;height:100vh;width:100%;z-index:99999}.af-preloader-wrap{display:inline-block;width:150px;height:5px;margin:auto;overflow:hidden;position:relative}.af-preloader-wrap:before{content:"";position:absolute;background-color:#2193b2;top:0;left:0;right:0;bottom:0;opacity:0.2}.af-preloader-wrap:after{content:"";position:absolute;background-color:#2193b2;top:0;left:0;right:0;bottom:0;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-animation:loaderbar 2s infinite;animation:loaderbar 2s infinite}@-webkit-keyframes loaderbar{0%,100%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}25%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0}50%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 0;transform-origin:100% 0}80%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 0;transform-origin:100% 0}}@keyframes loaderbar{0%,100%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}25%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0}50%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 0;transform-origin:100% 0}80%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 0;transform-origin:100% 0}}.uk-loader-spinner{margin:auto;width:40px;height:40px;background-color:#ff9966;-webkit-animation:sk-rotateplane 1.2s infinite ease-in-out;animation:sk-rotateplane 1.2s infinite ease-in-out}
&lt;/style&gt;
          </b:if>
        </b:includable>
  </b:widget>

بعد اختيار شكل من الشكلين السابقين قم بوضع الكود التالي فوق الوسم <body>  

<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'>
</div>
</div>
</div>
بعد وضع الكود السابق ننتقل الى الخطوة النهائية وهي الاسكربت الخاص بتشغيل اضافة تاثير التحميل . 
قم بالبحث عن الوسم /body وقم بوضع الكود التالي فوقه  
<script>//<![CDATA[
$(window).on('load', function() {
  $('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>

شرح التعديل على اضافة تاثير التحميل

المعرف delay الموجود في الاسكربت هو المعرف الخاص بزمن ظهور تاثير التحميل اي مدة الزمن المراد اختفاء التاثير بعدها وهي ملى من الثوان والقيمة الافتراضية هي 500 ملي ثانية تستطيع تغيرها بزيادة الزمن او نقصانه ولكن لا انصح بزيادة الزمن وافصل تركها كما هي حتى لا تطيل على الزائر .
لتغير لون التاثير قم بتغير كود الون #2193b2

هناك تعليق واحد:

قال تعالى { مَّا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ }

الاشتراك في: تعليقات الرسالة (Atom)