السلام عليكم , اليوم سنتعرف على كيفيو إضافة تأتير تحميل الصفحات بشكل انيق جدا واحترافي ,مع امكانية تخصيص الشكل الدي يناسب , الاضافة جميلة وفيفة ولا تحتاج الى تعقيد فقط تابع الشرح جيدا ,
المعاينة
1 ) توجه الى لوحة تحكم بلوجر2 ) القالب ثم تحرير html
2 ) بع دالك إبحث عن هدا الكود ]]></b:skin>
3 ) أضف فوقه هدا الكود مباشرة
/* MBL Lazy Page Loading Effect (http://www.abou-nizar.com) */
#mbl-lazyloading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD2s4K4kIWe9nr0gtsQvTTAfOJrxuAwMQ6l-AVfPkoSuyRoGfjVyuiTenNk_dv9Rh4DStq9zJMUliP3k20IgTqa3dqKWM0RzDFkGhU0Pj8YaTYj1OvcKrU5jflz9yin1ws0z_P_fiKdwM/s1600/MBL-loading-7.gif) 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;
}
4 ) إبحث عن </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>
5 ) كخطوة اخيرة إبحث عن <body>
اضف تحته هدا الكود إدا اردت عرض التأتير على جميع الصفحات
<div id='mbl-lazyloading'><div id='mbl-progress-bar'/><div id='mbl-loader'>هدا الكود من تطوير ابو نزار للمعلوميات<a href='http://www.abou-nizar.com/'>مدونتي</a></div></div>
في حالة تريد عرض التأتير على الصفحة الرئيسية فقط أضف هدا الكود بدلا من الاول
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>هدا الكود من تطوير ابو نزار للمعلوميات<a href="http://www.abou-nizar.com/">مدونتي</a></div></div></b:if>
يمكنك في أي لحظة تغيير شكل العرض وذالك بالبحث عن كود الصورة الملون باللون الاحمر في الكود الاول وتغييره بما يناسبك وهده بعض التأتيرات الجميلة
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4vyRtXrOjKhbZ6Hmwu0TnazmZxyt03N6Nws-RYmlYSJPnTz5__l1of4HJzPammBG7dx89bbxNRDm1S_ARhxrlb11Aww1LXnV4A20zKd5fWeSLk7s-4FEl1K6IdUn8v2uw2HLgJnxLmA/s1600/MBL-Loading-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhayFA7XObIiNC9MrU8B_c4LPM0YDwVEnAskoI48gMXklhjP2DYkj4ISU8UnCSpkQk6v7ohEXJ5dtqo-tFBhXGUy_ghXhWOB2HqP-htSkNlIBCGrq6AQu71_s_Oib_frjAO9zWrY31JdLA/s1600/MBL-Loading-2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirkCDz4-9Kop5oKxZbkBZito7lpnDasAcuAVUcdMpBnavHZsHmB3t0WHIN3GHp7xJybKWMqxDpGe0eAQriJwmVU2yiTDw7MwD9KFVkBRYLQymoN1bEfUfG5Fi8x6_gLb_3f6zgmA9Y6SI/s1600/MBL-Loading-3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mwz0EcOczfmJ8QKbZ9v9oDi1WsFN3Q_cY0ZT-dWYw4RJBgJxnlMSbOuCZN3B4NIV5ZK7hm1g7JvOm7exUxJyR9kWA9ouA2RAovw7tHlbcX_Pgh705Lnvb9_xjimIE4POMnHDL8o11fY/s1600/MBL-loading-5.gif
هدا كل ما في الامر , اختر الشكل الدي يعجبه وضعه مكان هدا الرابط
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD2s4K4kIWe9nr0gtsQvTTAfOJrxuAwMQ6l-AVfPkoSuyRoGfjVyuiTenNk_dv9Rh4DStq9zJMUliP3k20IgTqa3dqKWM0RzDFkGhU0Pj8YaTYj1OvcKrU5jflz9yin1ws0z_P_fiKdwM/s1600/MBL-loading-7.gifأتمن أن تنال الاضافة إعجابك إدا واجهت مشكلة لا تتردد نحن في الخدمة -_-
