أضف صفحة تحميل الموقع بشكل مميز

إخواني الكرام كيف حالكم اليوم بإذن الله سأشرح لكم طريقة لإضافة صفحة تحميل الموقع أو ما يسمى
Lazy Page Loading

وهي إضافة تظهر عند كل تحميل للمدونة حيت تضهر صورة متحركة قبل إنتهاء تحميل الموقع بالكامل 

وهي إضافة جميلة ومميزة تضفي على المدونة لمسة إحترافية

صورة من الإضافة

هذه صورة لمثال هناك أشكال اخرى سأطرحها في نهاية الشرح بإدن الله

نبدأ على بركة الله

أولا قم بالبحث في القالب عن الوسم التالي ]]></b:skin>

ثم قبله ضع هذا الكود

#mbl-lazyloading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(هنا ضع صورة التحميل) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#mbl-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#mbl-loader {
height: 100%;
display: none;
}

بعد ذالك قم بالبحث عن الوسم </head>

ثم فوقه ضه هذا الكود

<script>
(function($){
$("html").removeClass("MD");

$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
$("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>

بعد ذالك قم بالبحث عن الوسم </body>

وفوقه ضع هذا الكود

هذا لإضهار صفحة التحميل فقط في الصفحة الرئيسية

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div></b:if>

وهذا لإضهار صفحة التحميل في جميع صفحات مدونتك

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div>

وآخر خطوة وهي إختيار الشكل الذي تريد بالنسبة للصورة المتحركة وههي بعض الامثلة

قم بإختيار الصورة التي تريد ثم إنسخ رابطها وضعه في الكود الاول بدل كلمة  "هنا ضع صورة التحميل"

هذا كل شيئ اتمنى ان تعجبكم الإضافة بالتوفيق للجميع ودمتم في رعاية الله وحفظه