مرحبا بكم زوار و متتبعي أفكار Pro.
في هذا الموضوع سأقوم بشرح كيفية إضافة تأثير تحميل الصفحات الخاص بـكود JQuery Lazy Load على البلوجر لتعبر على أن الصفحة قيد التحميل.
مميزات هذه الإضافة :
- لا تؤثر على سرعة / صداقة مدونتك مع محركات البحث.
- متوافق مع جميع المتصفحات (جوجل كروم، فايرفوكس، وإنترنت إكسبلورر وغيرها ...).
- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات، وتجعل الزوار المهتمين ينتظرون على مدونتك بمجرد رؤية الصورة المعبرة عن التحميل.
إن كنت لم تسمع بإضافة jQuery Lazy Load من قبل أنصحك بزيارة الموضوع التالي : اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load
طريقة إضافة تأثير التحميل :
1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *
2- أنقر على "Ctrl + F" و ابحث عن الكود التالي :
و ألصق مباشرة فوقه كود css التالي :
4- ثم ابحث بعد ذلك على
مميزات هذه الإضافة :
- لا تؤثر على سرعة / صداقة مدونتك مع محركات البحث.
- متوافق مع جميع المتصفحات (جوجل كروم، فايرفوكس، وإنترنت إكسبلورر وغيرها ...).
- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات، وتجعل الزوار المهتمين ينتظرون على مدونتك بمجرد رؤية الصورة المعبرة عن التحميل.
إن كنت لم تسمع بإضافة jQuery Lazy Load من قبل أنصحك بزيارة الموضوع التالي : اجعل تحميل صفحات مدونتك/موقعك أسرع باستخدام إضافة jQuery Lazy Load
طريقة إضافة تأثير التحميل :
1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *
2- أنقر على "Ctrl + F" و ابحث عن الكود التالي :
]]>
و ألصق مباشرة فوقه كود 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- بنفس الطريقة ابحث عن و ألصق مباشرة فوقه الكود التالي :
اللون الأحمر = هنا ضع رابط الصورة المتحركة (سأضع لك مجموعة من روابط الصور بالأسفل).
اللون الأخضر = من هنا يمكنك تغيير لون progress-bar (أي شريط التحميل).
3- بنفس الطريقة ابحث عن و ألصق مباشرة فوقه الكود التالي :
4- ثم ابحث بعد ذلك على
ليست هناك تعليقات: