عرض مشاركة واحدة
قديم 07-29-2012, 07:40 PM   #1
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
Thumbs up شرح إضافة أداة جاري تحميل الصفحة باحترافية إلى مدونات بلوجر

بسم الله الرحمن الرحيم
في هذا الموضوع سنتعرف بإذن الله على شرح إضافة أداة "جاري تحميل الصفحة" باحترافية إلى مدونات بلوجر.

أولا مثال على الإضافة :



لمشاهدة مثال حي : مدونة تجريبية


الآن شرح شرح إضافة أداة جاري تحميل الصفحة باحترافية إلى مدونات بلوجر :

إذهب إلى تصميم ثم تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم :

1- ابحث عن ]]></b:skin> وأضف قبلها مباشرة :

كود:
#loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #333333 url(https://lh4.googleusercontent.com/-q6q1DIKHlOQ/T3OTAgcOjnI/AAAAAAAAAR0/XMzN3w6bs8w/h1600/ajax-loader.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px;}.v2 #loading { display: none; } #progress-bar { position: absolute; top: 0; left: 0; background: #eee; opacity: 0.8; width: 0; height: 18px;}#loader { background: url(http://i1258.photobucket.com/albums/ii536/bloggerexp/Loading.png) no-repeat center 25%; height: 100%; display: block;}
غير الرابط الأحمر إلى رابط الصورة المراد عرضها في أداة جاري تحميل الصفحة

2- الآن ابحث عن </head> وأضف قبلها مباشرة :


كود:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
    <script>(function($){$(&quot;html&quot;).removeClass(&quot;v2&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>

وأخير لعرض الإضافة في جميع صفحات المدونة الصق الكود التالي مباشرة بعد <body> :

كود:
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
ولعرض أداة جاري تحميل الصفحة على الصفحة الرئيسية فقط، الصق الكود التالي مباشرة بعد <body> :

كود:
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div> </b:if>

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس