18‏/09‏/2014

نرحب بكل زائر ومشاهد لهذه التدوينة والتي فيها سأشرككم مرة أخرى إضافة خاصة بتحميل الموقع او المدونة, سبق وقدمت مثل هذه الإضافة في هذه التدوينة ، لكن كانت عبارة عن تأثير وليس لها فائدة كبيرة وبغض النظر عما كتبته عنها فهذه الإضافة ستكون بديل عن السابقة ماذا يميزها ؟ من مميزاتها وفوائدها هي تقوم بتحميل كافة عناصر المدونة من مواضيع وإضافات وغيرها وعند إكتمال التحميل ستظهر الصفحة أو المدونة بشكل كامل وذلك أيضا حسب سرعة الإتصال وأجد أنها مفيدة وسابقا كانت تستعملها يوتوب عبارة عن مستطيل بالأعلى
شرح طريقة التركيب
1. من داخل القالب ابحث باستعمال CTRL+F عن <head/> ثم ضع فوقه الكود التالي
<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>
2. ابحث عن <body> وضع الكود التالي أسفله
<div id="loading">
   <div id="progress-bar">
  </div>
</div>
3. ابحث عن ]]></b:skin> وضع الكود التالي فوقه
/* CSS Loader Pg Ar1web.com */
#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3884fd url(http://2.bp.blogspot.com/-UwFHaNJAFeU/VBq6A9dHhtI/AAAAAAAAFz8/N-Rj1WR0NMU/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;
}
* المحدد باللون الأصفر خاص بلون الخلفية
* المحدد باللون البرتقالي خاص بالصورة
نرحب بكل زائر ومشاهد لهذه التدوينة والتي فيها سأشرككم مرة أخرى إضافة خاصة بتحميل الموقع او المدونة, سبق وقدمت مثل هذه الإضافة في هذه التدوينة ، لكن كانت عبارة عن تأثير وليس لها فائدة كبيرة وبغض النظر عما كتبته عنها فهذه الإضافة ستكون بديل عن السابقة ماذا يميزها ؟ من مميزاتها وفوائدها هي تقوم بتحميل كافة عناصر المدونة من مواضيع وإضافات وغيرها وعند إكتمال التحميل ستظهر الصفحة أو المدونة بشكل كامل وذلك أيضا حسب سرعة الإتصال وأجد أنها مفيدة وسابقا كانت تستعملها يوتوب عبارة عن مستطيل بالأعلى
شرح طريقة التركيب
1. من داخل القالب ابحث باستعمال CTRL+F عن <head/> ثم ضع فوقه الكود التالي
<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>
2. ابحث عن <body> وضع الكود التالي أسفله
<div id="loading">
   <div id="progress-bar">
  </div>
</div>
3. ابحث عن ]]></b:skin> وضع الكود التالي فوقه
/* CSS Loader Pg Ar1web.com */
#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3884fd url(http://2.bp.blogspot.com/-UwFHaNJAFeU/VBq6A9dHhtI/AAAAAAAAFz8/N-Rj1WR0NMU/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;
}
* المحدد باللون الأصفر خاص بلون الخلفية
* المحدد باللون البرتقالي خاص بالصورة
20 Blogger تعليقات
Disqus
20 التعليقات
المشرف
avatar
المشرف
avatar
المشرف
avatar
المشرف
avatar

لا يمكنني تحميل الملف؟؟؟
ممن رفعه على مركز أخر

المشرف
avatar

شرح التحميل من الموقع : http://www.ar1web.com/p/blog-page_81.html

المشرف
avatar

الموقع كان محظور من مضاد الفيروسات :( , ولكن تم حل المشكلة ^_^

المشرف
avatar

بارك الله فيك :-bd :-d

المشرف
avatar

لم تعمل أخى الكريم رابط المعاينة :
http://msrawy4mix.blogspot.com

المشرف
avatar

اخى حسام انا لا استطيع نسخ الاكواد لتركيب الاضافة ماذا افعل

المشرف
avatar

ابحث عن /* Css Button */

ضع فوقها اكواد Css والتي تبدأ بــ /* CSS Loader Pg Ar1web.com */

المشرف
avatar

إستعمل ـ Ctrl+C عند النسخ واللصق إستعمل Ctrl+Vـ

المشرف
avatar

السلام عليك يا اخي اريد لون للصورة التي في المثال الدي على اليمين و شكرا

المشرف
avatar

عليكم السلام
بمعنى ؟؟ وضح كلامك

المشرف
avatar

الصورة التي باللون الازرق التي في المتال الاخير تحت الموضوع اريد كود للون الدي يناسبها و شكرا

المشرف
avatar

هذا اللون : #3884fd
هذه الصورة : http://goo.gl/6nflEI

المشرف
avatar

ارجوووك اخي حسام
وضعت هذه الإضافه على قالبي وحفظته وبعد الحفظ
حدثت مشكله كبيره جداً
عندما افتح مدونتي انتظر التحميل مده طويله جداً
يعني التحميل يظل موجود (دائم )
لترى المعاينه بنفسك ادخل الى مدونتي
http://tekny-net.blogspot.com/

المشرف
avatar

سأرسل لك القالب جاهز مع الإضافة

المشرف
avatar

اضافة ممتازة شكرا

المشرف
avatar

بارك الله فيك يا اخي

المشرف
avatar

اخي اريد ان احذف اضافة تحميل المدونة

معاينة

http://arabsportslive.blogspot.com/

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة