بسم الله الرحمن الرحيم
في هذا الموضوع سنتعرف بإذن الله على شرح إضافة أداة "جاري تحميل الصفحة" باحترافية إلى مدونات بلوجر.
أولا مثال على الإضافة :
لمشاهدة مثال حي : مدونة تجريبية
الآن شرح شرح إضافة أداة جاري تحميل الصفحة باحترافية إلى مدونات بلوجر :
إذهب إلى
تصميم ثم
تحرير 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($){$("html").removeClass("v2");$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });$(window).load(function(){ $("#progress-bar").stop().animate({ width: "100%" },600,function(){ $("#loading").fadeOut("fast",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>