كيفية إضافة تأثير تحميل المدونة وبشكل إحترافي لمدونات بلوجر

زوار ومتابعي المدونة

أسعد الله أوقاتكم بكل خير ومحبة

اليوم سوف نتعرف على إضافة تضيف لمدونتك لمسة إحترافية إلا وهي تأثير تحميل المدونة .

- طريقة التركيب :

1- أدخل إلى مدونتك ثم أختر لوحة التحكم >> قالب >> تحرير قالب .

2- إبحث عن الوسم : <body>

3- إضف الكود التالي تحته مباشرة :

 <div id='md-loading'><div id='md-progress-bar'/><div id='md-loader'>تحميل...</div></div>

4- إبحث عن الوسم : </head>

5- إضف الكود التالي فوقه :

 &lt;style&gt; /* jQuery page loading effect by www.99pcsoft.blogspot.com */ #md-loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6fgkIsXinPicEr2p628QNPFkClv8D223xmOe6sKgHfaPtmJ7REXm6WZHJU3FzMv9Xw3QeDlPzUk8l8X8QLmmuPRmMFlu8rVqJ3BJLlYenxP-Rfni8oq4VyW4v5Q32hqYSXERl6UiJK4p/h92/mybloggerbuzz+animation+effect.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: #de1301; opacity: 0.8; width: 0; height: 3px; } #md-loader { height: 100%; display: none; } &lt;/style&gt; &lt;script&gt; (function($){ $(&amp;quot;html&amp;quot;).removeClass(&amp;quot;MD&amp;quot;); $(&amp;quot;#header&amp;quot;).ready(function(){ $(&amp;quot;#md-progress-bar&amp;quot;).stop().animate({ width: &amp;quot;25%&amp;quot; },1500) }); $(&amp;quot;#footer&amp;quot;).ready(function(){ $(&amp;quot;#md-progress-bar&amp;quot;).stop().animate({ width: &amp;quot;75%&amp;quot; },1500) }); $(window).load(function(){ $(&amp;quot;#md-progress-bar&amp;quot;).stop().animate({ width: &amp;quot;100%&amp;quot; },600,function(){ $(&amp;quot;#md-loading&amp;quot;).fadeOut(&amp;quot;fast&amp;quot;,function(){ $(this).remove(); }); }); }); })(jQuery); &lt;/script&gt;

6- إحفظ القالب .