معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   شرح إضافة أداة جاري تحميل الصفحة باحترافية إلى مدونات بلوجر (https://www.bloggerexp.com/showthread.php?t=2869)

admin 07-29-2012 07:40 PM

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

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

http://i1258.photobucket.com/albums/...ageblogger.png

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


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

إذهب إلى تصميم ثم تحرير 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>

REDA 07-29-2012 08:06 PM

رد: شرح إضافة أداة جاري تحميل الصفحة باحترافية إلى مدونات بلوجر
 
جميل جدا اخى عثمان ... سؤال :هل هى تعمل على بطئ المدونة ام لا ؟؟:)

yosefssss 07-29-2012 08:27 PM

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

admin 07-29-2012 10:47 PM

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

المشاركة الأصلية كتبت بواسطة REDA (المشاركة 5604)
جميل جدا اخى عثمان ... سؤال :هل هى تعمل على بطئ المدونة ام لا ؟؟:)

عندما كنت مركبها على مدونة قالوا لي أنها تبطئ من سرعتها والله أعلم
اقتباس:

المشاركة الأصلية كتبت بواسطة yosefssss (المشاركة 5605)
إضافة رائعة تستحق الإعجاب

ممكن يكون الاعجاب على الفيسبوك :nosweat:


الساعة الآن 10:59 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012