كيفية إضافة تأثير تحميل الصفحات الخاص بـكود JQuery Lazy Load على البلوجر

مرحبا بكم زوار و متتبعي أفكار Pro.

في هذا الموضوع سأقوم بشرح  كيفية إضافة تأثير تحميل الصفحات الخاص بـكود JQuery Lazy Load على البلوجر لتعبر على أن الصفحة قيد التحميل.

مميزات هذه الإضافة :


- لا تؤثر على سرعة / صداقة مدونتك مع محركات البحث.
- متوافق مع جميع المتصفحات (جوجل كروم، فايرفوكس، وإنترنت إكسبلورر وغيرها ...).
- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات، وتجعل الزوار المهتمين ينتظرون على مدونتك بمجرد رؤية الصورة المعبرة عن التحميل.

إن كنت لم تسمع بإضافة 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) */

وقم بالتعديل عليه باستبدال  مايلي :

اللون الأحمر = هنا ضع رابط الصورة المتحركة (سأضع لك مجموعة من روابط الصور بالأسفل).
اللون الأخضر = من هنا يمكنك تغيير لون 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>

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>

5- و في الأخير قم بحفظ القالب.

إليكم الآن مجموعة من الصور المتحركة ذات تأثير التحميل :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuoByMael0IRt3V9b6LBrP9TCnqsWqKdE2S8PEeYDc3yNRvNdHyu5AxAKcEcQfNVnOjlNA2053PovUWmHrKYLZmpbgYZswIELITN7iReLdy1yTopqIQHWBQ7GwGCAEHaZm-PKyNsULWLuQ/s1600/Loading+Effect+-+Black_Grey+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqpgGUe11H6skDIpD_Og7JfcKcPaLtPJYdnSoWx72e0Lz66ORVuZsAl1JHyFK8ubWGkTpFFD9XbWBdGTYeGxIWhPzGWe6jAnzxer_Foj349WZkkvXBu4w8lzNASvptU2STSHv0gSBTgTf/s1600/Loading+Effect+-+Black_Grey+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4t6d-obn0uUIgmeBoKgNDQ5p-KUtB8lxBFDItNZOBr6vbgx8ZEmmhU5TVc8JzWbM3FQSFTBEeX7ZQNbTfJZgJvSY7LCwE4KrRrqszw6bOvSIbW3Bb24oGId_eD3MkI_s7Rq6gywrBswN/s1600/Loading+Effect+-+Black_Grey+3+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSxO0lmKHGJcpwQxojiX1Ck-p1FPYmzpjj4Aep_NkkoKETyadnVgQ2qcXErhNFDSxkwAyoG9Lr1ZUCH4DO1vvuB0Gi0mq5CWFonyw0yalTNr5yCdyuqjlxq0PpXbDTrPAP_5rdRfKJTRlD/s1600/Loading+Effect+-+Blue+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3dukgusG7T_7d9FblGeNwOZ1K3POOJ1uNbjKWAtMwnQe0d6XVRC9NaZEyULhaMjBwA3JaMW-LG6Z3M4DWfb9fwzceuVr-yG7gQFfL7RfPXDfkwai85MSb9yey2z0F44oQv3B9OowMQqB/s1600/Loading+Effect+-+Blue+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEiIq9TnHYx0aH9jbgEoG3EfR46oePjIxf2PapjPYED06Zo2JZ9mklnljWjP0PbiAeM4ZgPCgwkU_x4un8S3APrY-GId-wid9BPSnZSxt0lxZ_fn8wzf7AbjNI3dZ3L55D9U-KijtC7Rpy/s1600/Loading+Effect+-+Blue+3+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgy9eAT58aUvvo54z2-JWalDnvd8ZOBcrcxi10Mr26KshesPdZwnVHJmzPwLsYZhyphenhyphenh_92REI9H1skGmRIs73KRs218nJ4VGSZblAoVp4Axc8OL0aMA4_GwKEdm-oE2GTNL90eoaVNB2HVy/s1600/Loading+Effect+-+Green+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvrgIsBBqWg3HnfElRVl8Wyc6biOGQ9mPEeFikb3ex9vW2coqCdKQ5v3J0jwZ8MiOFImz3NZ6qKi8WHh9GfWefUBHLTyk0-4s56Kw31vwJyvZCuDhteVdunGJYRaEC4QMXLFs_dXYqLnEZ/s1600/Loading+Effect+-+Green+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6ncOFEWa_DT-k0Xgu9bIiHJDs58bVqiZlDhfauKM3WNCBN4g0F_-rWWebPQ55Lii4M4tZODQL11k3bb7aBLSpApf1l_isNYU6NZsMaPu63QvNp2u67ar8hq5anExu2vjOYD5jOBRnZHH/s1600/Loading+Effect+-+Green+3+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrUsK6mUXOt-7tC5WtUEUEdRdD1FQKeSetU_DUqMA35TJbhGpZ3_RaM8mB6toI9WWauPXpNltgwtOX7dzZtvYvAH5NSOOgk5Tqv3GoHJ2uE96vv8ZWnY0kmZ1xBeNooSMRCWlGz-r96j0/s1600/Loading+Effect+-+Green+4+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy40n8MdYT-shpkJd99swutpPP5_J8Tn2jL2OgtpkiMPjtIx_IF81PXJ74wZyzpwfuKgeGzVSnwBcjs3ZOxKpgitLIihk4KK6JQbRDewz3xxY-0NHYXT1kbNYjAySz2MJPlzyWBw1Q4yC/s1600/Loading+Effect+-+Orange+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB_cofN53Qi-dR8QUR7M3lx-k469pEa5u7n5cxxy5xzRRrHz2dwBYlMcgZ3SgryUP7mVdzv3_3IYGcZsrgfLW4xRwNGq1y47VKl5ZlvH2hu095kn-LHIiTjgDQXuv6Hq0BnfwIp3Pyc1u/s1600/Loading+Effect+-+Orange+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4Bc319fjdie6ayu6G6PFkUdWUe8Ii8ouZRrvFOcYDVd0_Zs4nP5oTE7z9zKyFDOMFoG3Q63l2qmCUGgH_bRlKVHSdVmBwA4YSgKXSxLlWRM5bQN1BsFqZf9QCu7IXj4MxhbISa0app3q/s1600/Loading+Effect+-+Purple+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9PExna-6SBAlxgr5lEdWLSEg-4eXKdLMPR0kCq8kgq0eva4sJNw8aDdnWP_HsJC_zDUIpB0o4TcdrTM9EtouGF5fpiW2Kov5RR4bg5u5C0WTajUWIPG6oUi9bdtOedA_ytZ6tpt1Q01s/s1600/Loading+Effect+-+Purple+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqH02nyhu9qXmV6NLdm5Qu6Olm_66bG8helrRbgis2aSRqUTkauEnOFYdWV13YWPNTowX4eZWZwpvjTceQHwZse2Dn6w7gJWm76UafWukJqe6g6UJidHWRIPg2gIytSCnzigAPOnVMZIMd/s1600/Loading+Effect+-+Red+1+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1eFkstM7wuqzAIPUiX4gm_4zSeaX2TVRNRy6d4gqd-Va6OuJYfo-lhtsS4OcE61rkUAG_XX9jziiy_Th4Ezbo4oUM8lSurS7hvQhMXtJYEBfApU-N37WQ80KLPIu8is7OGKP2lppMYut/s1600/Loading+Effect+-+Red+2+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3tH4gR6q_-a5aXwFFej0GUbX6CqITZ1f7fndtSSGW4wLCNppq1_Sq4ehvev5UPU865SEto-30aVbePjbTyfO2gD0AnIyZSSD-1pDNLeVo5zA_LmbpgNMOMBuzNJx3fykb-J2DPq-xmh5/s1600/Loading+Effect+-+Red+3+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiysLGYn46LDO2wq_Is04n8rpfiXs6lPF6fQ0jDwZcmJQqYNBYVW3R5NhmR_-KxIUkoJrqiBS12NSFkiwXhgPT1QlJTcA50lpmypWpcirP4WBu1ChkzUTamLP37H9prJrJGQ6mYEO-3TUwM/s1600/Loading+Effect+-+Red+4+-+www.afkarpro.blogspot.com.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSw4rSJO2E8_ly3SICWOrsAUGw3iHMZflt4gWebhWAMLKCZ8TT7g4TidLBBy0SyQTc1L7bOslwitGOQ71qU0ZjgNBpSHv4o5berUCjKt2Bwcodgj37wVG7lbNGHfS0uaxEhmizd4gbNIB/s1600/Loading+Effect+-+Red+5+-+www.afkarpro.blogspot.com.gif

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...