اضافة تأثير تحميل المدونة الى بلوجر 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   من الكود السابق ...

http://1.bp.blogspot.com/-l8Ot6w2IFvQ/UE4K-JAdQpI/AAAAAAAAFM0/aGUEayOCejo/s1600/MBL-Loading-1.gif

http://3.bp.blogspot.com/-FA2RWStvA88/UE4K-0jbwmI/AAAAAAAAFM8/IiNkaVjnUng/s1600/MBL-Loading-2.gif

 http://2.bp.blogspot.com/-3RFuLj1RgxA/UE4K_7DbkfI/AAAAAAAAFNE/RTHE-AygGlA/s1600/MBL-Loading-3.gif

 http://3.bp.blogspot.com/-GFGEKhfmVrI/UE4LAQuhxrI/AAAAAAAAFNM/ibrUuDyPg1c/s1600/MBL-loading-4.gif

 http://1.bp.blogspot.com/-y6MhdpiSXZw/UE4LBRH76LI/AAAAAAAAFNQ/DAsL4Hc8Opc/s1600/MBL-loading-5.gif

http://2.bp.blogspot.com/-QjD-a18CPCU/UE4LCHdGNmI/AAAAAAAAFNY/QVslh5SBCkg/s1600/MBL-loading-6.gif

http://1.bp.blogspot.com/-Hck1-QYElPY/UE4LCi8Q2pI/AAAAAAAAFNc/ElsOpKUQVyY/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