إضافة سكريبت التحميل لمدونتك 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 .
 تغير ألوان الكود
تابع الصورة بالأسفل لتستطيع فعل ذالك و تقوم بإنشاء ستايل خاص بك.

0 comments:

Post a Comment