كيفية إضافة تأثير تحميل الصفحات الخاص بـكود JQuery Lazy Load على البلوجر
مرحبا بكم زوار و متتبعي أفكار Pro.
في هذا الموضوع سأقوم بشرح كيفية إضافة تأثير تحميل الصفحات الخاص بـكود JQuery Lazy Load على البلوجر لتعبر على أن الصفحة قيد التحميل.
مميزات هذه الإضافة :
- لا تؤثر على سرعة / صداقة مدونتك مع محركات البحث.
- متوافق مع جميع المتصفحات (جوجل كروم، فايرفوكس، وإنترنت إكسبلورر وغيرها ...).
- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات، وتجعل الزوار المهتمين ينتظرون على مدونتك بمجرد رؤية الصورة المعبرة عن التحميل.
إن كنت لم تسمع بإضافة jQuery Lazy Load من قبل أنصحك بزيارة الموضوع التالي : اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load
طريقة إضافة تأثير التحميل :
1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *
2- أنقر على "Ctrl + F" و ابحث عن الكود التالي :
و ألصق مباشرة فوقه كود css التالي :
4- ثم ابحث بعد ذلك على </body> و ألصق الكود التالي :
5- و في الأخير قم بحفظ القالب.
إليكم الآن مجموعة من الصور المتحركة ذات تأثير التحميل :
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
مميزات هذه الإضافة :
- لا تؤثر على سرعة / صداقة مدونتك مع محركات البحث.
- متوافق مع جميع المتصفحات (جوجل كروم، فايرفوكس، وإنترنت إكسبلورر وغيرها ...).
- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات، وتجعل الزوار المهتمين ينتظرون على مدونتك بمجرد رؤية الصورة المعبرة عن التحميل.
إن كنت لم تسمع بإضافة jQuery Lazy Load من قبل أنصحك بزيارة الموضوع التالي : اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load
طريقة إضافة تأثير التحميل :
1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *
2- أنقر على "Ctrl + F" و ابحث عن الكود التالي :
]]></b:skin>
و ألصق مباشرة فوقه كود css التالي :
/*Start MBL Lazy Page Loading Effect CSS coding (www.afkarpro.blogspot.com) */
#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;}
/*End MBL Lazy Page Loading Effect CSS coding (www.afkarpro.blogspot.com) */
#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;}
/*End MBL Lazy Page Loading Effect CSS coding (www.afkarpro.blogspot.com) */
وقم بالتعديل عليه باستبدال مايلي :
اللون الأحمر = هنا ضع رابط الصورة المتحركة (سأضع لك مجموعة من روابط الصور بالأسفل).
اللون الأخضر = من هنا يمكنك تغيير لون progress-bar (أي شريط التحميل).
3- بنفس الطريقة ابحث عن </head> و ألصق مباشرة فوقه الكود التالي :
اللون الأحمر = هنا ضع رابط الصورة المتحركة (سأضع لك مجموعة من روابط الصور بالأسفل).
اللون الأخضر = من هنا يمكنك تغيير لون progress-bar (أي شريط التحميل).
3- بنفس الطريقة ابحث عن </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>
(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>
4- ثم ابحث بعد ذلك على </body> و ألصق الكود التالي :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>Powered By<a href="http://www.afkarpro.blogspot.com">AfkarPro - Loading Effect</a></div></div>
</b:if>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>Powered By<a href="http://www.afkarpro.blogspot.com">AfkarPro - Loading Effect</a></div></div>
</b:if>
5- و في الأخير قم بحفظ القالب.
إليكم الآن مجموعة من الصور المتحركة ذات تأثير التحميل :
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 |
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
روابط هذه التدوينة قابلة للنسخ واللصق | |
| URL | |
| HTML | |
| BBCode | |
اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load
يعتبر موضوع اليوم مُهِمًّا جدا وذلك لأنه جاء بأحسن طريقة للتخلص من بطئ تحميل صفحات المدونات و المواقع، و الذي يعاني منه أغلب المدونين خصوصا الذين يستعملون الصور.
هذه الحل هو عبارة عن إضافة مكونة من كود jQuery يطيق عليها اسم "jQuery Lazy Load"، وتقوم هذه الإضافة على تحميل ما يظهر في المتصفح أولاً من عناصر وصور، ثم بعد ذلك يتم تحميل باقي المحتويات بمجرد النزول إلى أسفل الصفحة بكيفية متسلسة.
بصفة عامة فالإضافة تقوم بتحميل مايظهر على الشاشة فقط و ليس صفحة المدونة كلها دفعة واحدة، دون أن تلاحظ ذلك وبهذا يتم الزيادة في سرعة التصفح.
لتركيب إضافة jQuery Lazy Load اتبع الخطوات التالية :
1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *
2- أنقر على "Ctrl + F" و ابحث عن </head> ثم انسخ فوقه الكود التالي :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('img').lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_aOiYqVlXjia5EyD6ovqEUToJziXbWJ9PEnllopWRB2Dmjw344nvTFg36SWjJonJWRjouDLGS2PA8Bi36z_IcOd5gr8R1Nru5H197vBCTgP_rYWB1HMUn36xPpwXpGPAEs_YvWHhDSnA/"
});
});
</script>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('img').lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_aOiYqVlXjia5EyD6ovqEUToJziXbWJ9PEnllopWRB2Dmjw344nvTFg36SWjJonJWRjouDLGS2PA8Bi36z_IcOd5gr8R1Nru5H197vBCTgP_rYWB1HMUn36xPpwXpGPAEs_YvWHhDSnA/"
});
});
</script>
3- نقوم بالتعديل على الكود حسب الرغبة بالشكل الآتي :
* إن كنت تستعمل مكتبة jQuery فيما سبق على مدونتك، فإنك لست مجبراً على نسخ السطرالملوَّنبالأحمر.
* كما هو موضح في السطر الملون بالأزرق فالإضافة تم تطبيقها على img (أي الصور فقط).
و لتطبيقها عنصر الموضوع أو التدوينة أو أي عنصر آخر، فقط يكفي أن تضيف class أو id العنصر المراد التطبيق عليه، وذلك حسب المثال الآتي :
مثال على البلوجر نستبدل السطر الأزرق بما يلي :
مثال على المنتديات نستبدل السطر الأزرق بما يلي :
* كما هو موضح في السطر الملون بالأزرق فالإضافة تم تطبيقها على img (أي الصور فقط).
و لتطبيقها عنصر الموضوع أو التدوينة أو أي عنصر آخر، فقط يكفي أن تضيف class أو id العنصر المراد التطبيق عليه، وذلك حسب المثال الآتي :
مثال على البلوجر نستبدل السطر الأزرق بما يلي :
jQuery('.post img').lazyload
مثال على المنتديات نستبدل السطر الأزرق بما يلي :
jQuery('.tborder img').lazyload
4- وفي الأخير لا تنسى حفظ القالب.
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
| روابط هذه التدوينة قابلة للنسخ واللصق | |
| URL | |
| HTML | |
| BBCode | |
