زوار ومتابعي المدونة
أسعد الله أوقاتكم بكل خير ومحبة
اليوم سوف نتعرف على إضافة تضيف لمدونتك لمسة إحترافية إلا وهي تأثير تحميل المدونة .
- طريقة التركيب :
1- أدخل إلى مدونتك ثم أختر لوحة التحكم >> قالب >> تحرير قالب .
2- إبحث عن الوسم : <body>
3- إضف الكود التالي تحته مباشرة :
<div id='md-loading'><div id='md-progress-bar'/><div id='md-loader'>تحميل...</div></div> 5- إضف الكود التالي فوقه :
<style> /* 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://lh5.googleusercontent.com/-rr2_VeJMLdk/UjHUgWyyyhI/AAAAAAAABv0/O1dXq1I0OTw/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; } </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> 
0 Comments:
إرسال تعليق