إضافة تأثير التحميل لمدونات بلوجر بأشكال رائعة وشكل مخصص

الجميع دائمًا في عجلة من أمرهم، ويُنظر إلى موقع الويب الذي يستغرق تحميله أكثر من ثانيتين أو ثلاث ثوانٍ على أنه “بطيء جدًا”.

 لكن لاتخف هناك طريقة لتجاوز هذا الوضع مؤقتًا وإبقاء المستخدمين على الموقع أو المدونة لفترة كافية لتحميل عناصر الصفحات.

تقوم هذه الاضافة بعرض صورة متحركة أو شعار المدونة أيا كان ريثما يقوم المتصفح بتحميل جميع المكونات والمحتوى ومن ضمنها الاعلانات، وبالتالي يجعل الزائر يقضي وقتاً أكثر على المدونة.

عدا عن ذلك تضفي لمسة احترافية لمدونتك وتجعلها مميزة أكثر.

 شرحنا اليوم عن عرض التأثير المتمثل بالصور المتحركة أو شعار الموقع خلال هذه الثواني واللتي ستلفت نظر الزائر وتعجبه … وهاذ ما يسمى تأثير التحميل للمدونة أو Preloading Effect.

أولاً: نذهب إلى بلوجر ومن ثم إلى لوحة التحكم الخاصة ومن ثم إلى التبويب المظهر ومن ثم إلى تعديل html .

ثانياً: نضيف كود الcss التالي أعلى الوسم]] ></b:skin

ونقوم باستبدال عبارة your effect gif برابط التأثير أو الصورة المتحركة والتي سأرفق عدة أشكال منها

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(' your effect gif ') no-repeat 50% 50%;padding:1em 1.2em;display:none}

ثالثاً: نضيف كود الجافا javascript  التالي أعلى الوسم <body/>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

 

ومن ثم نختار حفظ المظهر .

والآن نكون قد انتهينا من تركيب الكود يتبقى لدينا تخصيص الشكل أي كيف نريد أن يظهر الشعار او الصورة المتحركة

من كود الcss نقوم بتغيير الصورة المتحركة لاي صورة نريد

أو شعار موقعنا بصيغة gif  عبر استبدال عبارة your effect gif  برابط الصورة ومن ثم نقوم بحفظ المظهر.

وكذلك يمكنكم تحميل مئات الاشكال الرائعة من هذا الموقع