اضافة تأثير إنتظار تحميل الصفحة لمدونات بلوجر
مرحبا يا صديقي , في إطار مواصلة دورة إنشاء مدونة بلوجر جميلة وفريدة من نوعها. يجب عليك معرفة ان أهم ما يميز شكل مدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف. لذا وجب علينا التفكير ووضع خطة لجعل مدونتك مميزة ومختلفة عن أغلب مدونات بلوجر.
وفي مقال اليوم سأشرح لك كيف تضيف إلى قالبك تأثير تحميل ؟ , فإضافة تأثير تحميل الصفحة لمدونات بلوجر , إضافة مميزة , خفيفة تساعد الزائر علي البقاء أكبر وقت ممكن داخل صفحات الموقع لتحسين معدل الارتداد , كما أنها متوافقة مع جميع المتصفحات و الأجهزة.
ما هو تأثير تحميل الصفحة؟
هو عبارة عن إضافة تقوم بتغطية كامل القالب لحين تمام تحميل المقالات والصفحات في مدونتك علي بلوجر , كما تجعل الزائر مهتما أكثر من ذي قبل بقراءة المقالات أو مشاهدة صفحات الموقع. فلو كان تحميل مدونتك بطيئا , فالزئر سيشعر بالملل من الإنتظار أما صفحة بيضاء ..!
ما فائدته ؟
يساعد زوار الموقع علي تجنب رؤية أى قفزات في تحميل القالب أثناء تحميل الاكواد والاضافات أو اتخاذ الشكل الكامل لظهور السلايدر شو علي مدونتك. ايضا يساعدك هذا التأثير على تخفيض Bounce Rate “معدل الارتداد” في جميع الصفحات. ففي حال أدرك جوجل أن الزائر في موقعك يدخل لعدة ثواني فقط ثم يسارع بالخروج , سيعلم أن محتوي مدونتك لم يحقق الفائدة التي يبحث عنها الزائر.
كيفية إضافة تأثير التحميل؟
توجه نحو لوحة التحكم الخاصة بك في بلوجر. ثم من السهم بجوار تخصيص اختر تعديل html.
ابحث عن وسم الفتح <body> في قالبك
فوقه مباشرة أضف الكود التالي:
<b:if cond='not data:view.isPreview and not data:view.isLayoutMode'>
<style>
#Waiting{background:#1387ED;display:flex;justify-content:center;align-items:center;color:#fff;position:fixed;height:100%;width:100%;z-index:99999;top:0;left:0;}
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id='Waiting'>
<span class='loader'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).on("load",function(){$("#Waiting").show().fadeOut()});
//]]>
</script>
</b:if>
تعديلات الكود
jQuery(window).load(function(){jQuery('#Waiting').fadeOut();});
.jpg)
.jpg)
تعليقات