أفضل 6 مشاركات هذا الاسبوع

الأربعاء، 9 نوفمبر 2011

إضافة سكريبت التحميل لمدونتك QueryLoader

هل أعجبك الموضوع ؟

بسم الله الرحمن الرحيم

 

اليوم سنتكلم عن إضافة جميلة قد تعجب الكثيرين و هي عبارة عن إضافة “QueryLoader “LazyLoad إذا ما هي هذه الإضافة و ما هو عملها.

 إضافة سكريبت التحميل لمدونتك QueryLoader

QueryLoader هي عبارة عن شاشة سوداء (يمكن تغيرها) فارغة تغطي كل مساحة مدونتك حتى يتم تحميل المحتوى. بمعنى أن زوارك لن يروا التحميل الفعلي للمدونة، و بذل ذالك سيشاهدون صفحة سوداء مع شريك و النبة المئوية لتحميل. و بعد أن يتم تحميل كل محتوى مدونتك تختفي هذه الشاشة.

 

view demo

طريقة تركيب السكريبت

 

1- توجه للوحة تحكم المدونة / تصميم / تحرير HTML / تم إبحث عن الوسم </head> و قم بإضافة الكود بالأسفل قبله.

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/> <script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

2- بعد ذالك قم بالبحث عن الوسم </body> و ألصق الكود بالأسفل قبله.

<script>
           QueryLoader.selectorPreload = &quot;body&quot;; QueryLoader.init();
</script>

3- الأن قم بالبحث عن الوسم ]]></b:skin> و ضع الكود قبله.

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

الأن قم بحفظ القالب و تجربة القالب.

4- كما أنه باستطاعتك تغير خصائص الكود كما تريد أو يمكنك أن تتركه كما هو فهذا يرجع لك. إذا أردت أن تغير ألوان الإضافة فيجب تغير القيم في الكود الأخير الخاص بلغة CSS .

 تغير ألوان الكود

تابع الصورة بالأسفل لتستطيع فعل ذالك و تقوم بإنشاء ستايل خاص بك.

 

أتمنى أن تكون الإضافة قد أعجبتك. الأن قو بوضع تعليقاتك و اسنفساراتك بالأسفل.


مواضيع تفيدك أيضاَ :

اذا احببت هذه المقاله , رجاء منك انسخ الرابط وقم بنشره .

رابط هذه المشاركة :


كود HTML لهذه المشاركة:

0 التعليقات:

إرسال تعليق