أشارككم كيفية إضافة تأثير تحميل الصفحة أو التحميل المسبق إلى مدونتك علي بلوجر. هذه المقالة خاصة باضافة تأثير تحميل الصفحة المسبق في شكل علامة قلب ينبض أثناء تحميل الصفحة كامل 100%.
التحميل المسبق للصفحة
نعلم جميعًا جيدًا أن سرعة مدونتك من أفضل الأشياء التي يمكنك القيام بها لكسب ثقة Google، مما يضمن ظهور موضوعك في نتائج البحث الأولى لمحرك بحث Google. بهذه القوة، فإن سرعة المدونة العامل الرئيسي على أرباحنا في Adsense، والتي سأشرحها لك في السطور التالية.
شاهد أيضاً :-
سرعة مدونتك مهمة لاكتساب الثقة من Google والظهور في عمليات البحث الاولى. ومع ذلك يمكن أن يكون لهذا تأثير سلبي على أرباح Adsense. كما أن تأثير تحميل الصفحة ليس بالأمر الجديد ويستخدمه العديد من مواقع الويب المشهورة . يتم استخدام كل صفحة لغرض مختلف ، ولكن أحد أسباب تضمين هذا التأثير هو إخفاء العيوب في وقت تحميل الصفحة ، بغض النظر عن المدة التي يستغرقها التحميل، يتم عرض التخطيط بشكل غير متزامن.
خطوات اضافة تأثير الانتظار لتحميل صفحة لـ Blogger
تأثير انتظار تحميل الصفحة هي بمثابه ستاره لاخفاء محتوى الصفحه ( صور / اعلانات ) لبضع ثواني والتأكد ان تم تحميل صفحة الويب كاملة 100%. تم تصميم هذا الأداة باستخدام HTML, CSS, JS لتكون عبارة عن شعار قلب ينبض أثناء تحميل صفحة الويب ويظهر في نهايته شعار اخر يمكنك التعديل عليه.
- التوجه الى واجهة تحكم بلوجر
- الذهاب الى قسم المظهر
- الضغط على قائمة منسدلة بجانب التخصيص
- الضغط على تعديل html
- الآن تضغط في اي مكان داخل الاكواد
- في لوحة المفاتيح تضغط على Ctrl + F
- من خانة البحث تقوم بالبحث عن كود
]]></b:skin> - الآن فوق الكود السابق (b:skin) تقوم بلصق كود CSS التالي :-
/* Preloader */ .Preloader{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fff;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease} .Preloader.e{display:flex} .Preloader.h{opacity:0;visibility:hidden} .Spinner {position:relative;transform:rotate(165deg)} .Spinner:before, .Spinner:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .Spinner:before{animation:pldBefore 2s infinite} .Spinner:after{animation:pldAfter 2s infinite} @keyframes pldBefore{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes pldAfter{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .Preloader{background:#08102b;}
بعدها، مجددا من خانة البحث تقوم بالبحث عن كود </body> فوقه مباشر تلصق كودHTML و JS التالي :-
<b:if cond='data:view.isSingleItem and !data:view.isPreview'>
<!--[ HTML ]-->
<div class='Preloader' id='preloader'>
<div class='Spinner'/>
</div>
<!--[ JS ]-->
<script>/*<![CDATA[*/
var preloader = document.querySelector("#preloader");
preloader.classList.add("e");
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
preloader.classList.add("h");
}, 2000);
neonLight(5000);
});
/*]]>*/</script>
</b:if>
بعد الانتهاء احفظ العمل
