اضافة تأثير تحميل المدونة الى بلوجر Lazy Page Loading Effect

1- اذهب الى قالب مدونتك و أبحث عن الوسم  ]]></b:skin>   ثم ضف قبله الكود التالي  :

/*  MBL Lazy Page Loading Effect (www.webs-tools.blogspot.com) */

#mbl-lazyloading {

    position: fixed;

    z-index: 50;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: #FDFEF8 url(Loading-GIF-Here) 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;

}

ملاحظة :

ضع كود احد الصور التالية الذي يعجبك في مكان Loading-GIF-Here   من الكود السابق ...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Lfag1Ai5i-8-USXawVpaPE1Dgrz7T46rh4eK6Qx4-nVpwbtNnlrS0YNNwUqNxK1ua1HmcFQ4zAWtdJI8WBwsWSFSrSrNbO9F4zim7Z8J4PI_J7_9vYybQZ5L9RY2IipzV1ZH0qs5pLg/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEdop1IBeKwmhyphenhyphen6HkNS_oB0sYjuoRrH7glXt6iwO7VZPvuSBS462duUVdbaZRYXj8j4YHDLRMWH7H1BiNII_4yb861DpUbvm-zJUtkvLsB6y1URaiMQEmUMmG79Fbx5N6F8mWxTFMedOw/s1600/MBL-Loading-2.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPzMMefbPZ3bWvwbeCTv4TlDObzsCjwSCBhNByIKPu0Y60rtLbAs9SNTIURzed0k9Hrrme3XQarj_8x6TRugfyr1ewvreORsVVn9x86Gp5HjcNaCeSYpq4KpzNB6UhFEaGJGno0-n48A/s1600/MBL-Loading-3.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBkla32wQchBn-YJrjstlyUWlaJSUfvP5Isyox7qOsWnCoRWIc7XVoiLH4_Ym6EUtiPgwS0z0IqIy_qiBAqnnkATHDZJcnnY-ymZyroDNBxeZF5pwLto-Kk5X0rOW-8TpAjF6Q9Ub7AM/s1600/MBL-loading-4.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JiZNivBRPdCC55Ks4DJvnOSPHT-kXW9cLHdgN0VpHr3OnwssIU8JY5F77zomxEw54146PyshtiPv1oGFEEn3X_T_-1WfIElwxClnvantMNhHjLweq31oj5rSbPQDlzypnr8JxXV6Kow/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtYiaGlp4L_-oVGtuco3HihBzZ9aJlLyNNoKUvjQXmw0S5Q4Iry6pGvlen3n5hYIsvTh8QXRPo755rPL9QD5ebdYHCMrMojxHq2DvH4l6Sta_vWBgjRsAvgZt8mHdZMyzIljlVHmeNiA/s1600/MBL-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-g8vc3t2n3f5Esn1l-CluSZlDuc9O-XtaDIAuAt9cRDJDZfr3orcNzNs6ss9Cm5F2RFJexf9Jg9I69obZYCu85HWSfkkG2R7e2igTmVK3BZNluSzJbqrMpBDTamrL7XORg8d8s-iWR4I/s1600/MBL-loading-7.gif

2- انسخ الكود التالي و ضعه قبل  الوسم   </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>

3- بقي لك أن تختار بين الكودين الباقيين ...أنسخ الذي تريده و ضعه قبل الوسم  </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>

في الأخير احفظ القالب ...ومبروك عليك...و هذه الاضافة لا تؤثر على سرعة المدونة ..بل مجرد اضافة للتجميل 

*****************************

Filed Under: اضافات البلوجر on الجمعة، 24 أكتوبر 2014