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

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

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

 

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

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

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 .

 

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