انتظر جاري تحميل الصفحة لمدونة بلوجر

انتظر جاري تحميل الصفحة لمدونة بلوجر
السلام عليكم ورحمة الله وبركاته
أنتظر جاري تحميل الصفحة لمدونة بلوجر 
تأثير جميل لمدونات بلوجر , يضيف لمسه فنيه لمدونتك , في اغلب الاحيان تأخذ المدونة ثانيه او ثانيتين لكي تفتح معك الصفحة التي تريدها , فائدة هذا الكود بأنه يجعل الصفحة لاتفتح حتى ينتهي تحميلها , وبدل من ذالك تأتيك صفحة بيضاء وفي وسطها انتظر جاري التحميل , وفي الاعلى شريط يتماشى مع تحميل الصفحة .


طريقة التركيب :
الخطوة الاولى : 
  • ادخل مدونتك .
  • ثم القالب .
  • تحرير القالب .
  • ابحث في القالب عن </head>
  • ضع هذا الكود قبله :

    <style>
/*  7loll.blogspot.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://jetara.googlecode.com/files/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>
(function($){
$(&quot;html&quot;).removeClass(&quot;MD&quot;);

$(&quot;#header&quot;).ready(function(){ $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });

$(window).load(function(){
    $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#md-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>
الخطوة الثانيه : 
إظهار التأثير فقط في الصفحة الرئيسيه : 
  • ابحث في القالب عن <body>
  • ضع هذا الكود بعدها :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='md-loading'><div id='md-progress-bar'/><div id='md-loader'>Loading...</div></div></b:if>

إظهار التأثير فقط في صفحة المواضيع  :
  • ابحث في القالب عن <body>
  • ضع هذا الكود بعدها :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='md-loading'><div id='md-progress-bar'/><div id='md-loader'>Loading...</div></div></b:if>


انتظر جاري تحميل الصفحة لمدونة بلوجر
100 من 100 | 500 التقييم 5


لا تنسى تعمل لايك وشير لكى يستفيد غيرك من هذا الموضوع


0 comments:

التالى السابق الصفحة الرئيسية