قوالب بلوجر عربية ومجانية

ملتقى مدوني بلوجر لتبادل الخبرات في مجال التدوين - تعريب قوالب بلوجر - تعديل قوالب بلوحر - شروحات ودروس بلوجر - دعم فني لمدوني بلوجر

الثلاثاء، 3 أبريل، 2012

إضافة جاري تحميل الصفحة

بسم الله الرحمن الرحيم،
صراحة أنا كنت أنوي أن أعمل على قوالب بلوجر فقط، لكن جاءتني بعض الطلبات حول طريقة إضافة جاري تحميل الصفحة مثل ما في مدونتي، ولا أريد أن أخيب ظنكم في، لذلك إليكم شرح الإضافة :

صورة للإضافة :



شرح التركيب :

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

ابحث عن </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(https://lh5.googleusercontent.com/-ZL_TbKJ-r9k/T3OTXUlEDBI/AAAAAAAAAR8/8qZ4GYueNj4/h1600/logo-nevis.png) no-repeat center 25%; height: 100%; display: block;} 

الآن ابحث عن </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>

لا تنس ذكر المصدر عند نقل الموضوع.
لاستفساراتكم، طلبات الدعم، طلبات تعديل وتعريب قوالب بلوجر - اضغط هنا

اعلانات صديقة