إضافة تحميل الموقع مع الصفحات

أ
رحب بكل زائر ومشاهد لهذه التدوينة والتي فيها سأشرككم مرة أخرى إضافة خاصة بتحميل الموقع او المدونة ( Loading ) سبق وقدمت مثل هذه الإضافة في هذه التدوينة ، لكن كانت عبارة عن تأثير وليس لها فائدة كبيرة وبغض النظر عما كتبته عنها فهذه الإضافة ستكون بديل عن السابقة ماذا يميزها ؟ من مميزاتها وفوائدها هي تقوم بتحميل كافة عناصر المدونة من مواضيع وإضافات وغيرها وعند إكتمال التحميل ستظهر الصفحة أو المدونة بشكل كامل وذلك أيضا حسب سرعة الإتصال وأجد أنها مفيدة وسابقا كانت تستعملها يوتوب عبارة عن مستطيل بالأعلى ، وكالعادة أرفقت لكم صور رائعة للإنتظار قد تفيد الزائر بالنظر إليها ريتما ينتهي التحميل أترككم أولا مع المعاينات التالية

مثال 1 مثال 2 مثال 3

شرح طريقة التركيب

1 . نتوجه لقالب >> تحرير

2. ابحث بإستعمال CTRL+F عن : <head/>

3. ضع الكود التالي قبله [ فوقه]

<script type='text/javascript'>
(function($){$(&quot;html&quot;).removeClass(&quot;wwy&quot;);
 $(&quot;#header&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop()
  .animate({ width: &quot;25%&quot; },1500) });
 $(&quot;#footer&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop()
  .animate({ width: &quot;75%&quot; },1500) });
 $(window).load(function(){ $(&quot;#progress-bar&quot;).stop()
  .animate({ width: &quot;100%&quot; },600,function(){ $(&quot;#loading&quot;)
   .fadeOut(&quot;fast&quot;,function(){ $(this)
 .remove(); }); });});})(jQuery);
</script>

4. ابحث عن : <body>

5. ضع الكود التالي بعده [ أسفله]

<div id='loading'>
   <div id='progress-bar'/>
  </div>

6. ابحث عن ]]></b:skin> ضع الكود التالي فوقه

/* CSS Loader Pg Ar1web.com */
#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3884fd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FMKAXnlbWyKAQskz8J05H8qCYt8dZDdcgdmBcxU_yT0AMb6gaoQm5CXwC24_aVs2UDTH4v5VhlEdC-c7D_ip5kPyr0cQwm3ZzhnzhHheAr_zuYD84MkfhScJwkglztRpaZSi4L1Pqes/s1600/lo.gif) no-repeat center;
line-h eight: 350px; 
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.wwy #loading {
display: none;
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
background: #eee;
opacity: 0.8;
width: 0;
height: 18px;
}

* المحدد باللون الأصفر خاص بلون الخلفية

* المحدد باللون البرتقالي خاص بالصورة

ملاحظة لون الخلفية يجب أن يكون مطابق للون الصورة لكي يظهر الشكل الأصلي .. لمن أراد لون مغاير يرفقه بالتعليقات + الصورة .. أرفقت لكم صور متحركة لتحميل بأشكال مختلفة

أمثلة :

تحميل الملف

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

المشاركات الشائعة

أرشيف المدونة الإلكترونية

التسميات