أضافة تأثير تحميل احترافي V1

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

الاثنين، 13 فبراير، 2017

7:28 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي

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

ملحوظة:

إن كان قالبك ثقيل فلا أنصحك بهذه الاضافة لأن الزائر سينتظر كثيرا حتى يمل من الإنتضار

سأترككم الان مع المعاينة والشرح .. تابعونا 


شرح طريقة تركيب التأثير ^^

أولا: تذهب للمدونة
ثم تحرير القالب
ثم ابحث عن الوسم التالي باستعمال Cntr+F
 ]]></b:skin>
 
والأن أضف فوقه كود css التالي:

 .loader-wrapper { position: relative; text-align: center; height: 150px; top: 35%; }.pree-loading{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index:.loader-wrapper { position: relative; text-align: center; height: 150px; top: 35%; } 200000;background-color: #fa411e;background-image: linear-gradient(45deg,rgba(233, 30, 99, 0.75), rgba(243, 93, 40, 0.75));background-image: -moz-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));background-image: -webkit-linear-gradient(10deg,rgba(233, 30, 99, 0.75), rgba(243, 93, 40, 0.75));background-image: -ms-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));}.sk-wave{position: relative;top: 35%;transform: translateY(-50%); margin: auto;font-size: 10px;}.dot{ width: 18px;height: 18px;border: 10px solid #fff;border-radius: 50%;margin: 0 10px;display:inline-block;-webkit-transform:scale(0);transform:scale(0);-webkit-animation:fx 1000ms ease infinite 0;animation:fx 1000ms ease infinite 0}.dot:nth-child(2){-webkit-animation:fx 1000ms ease infinite 300ms;animation:fx 1000ms ease infinite 300ms}.dot:nth-child(3){-webkit-animation:fx 1000ms ease infinite 600ms;animation:fx 1000ms ease infinite 600ms}@-webkit-keyframes fx{50%{-webkit-transform:scale(1);transform:scale(1);opacity:1;filter:alpha(opacity=100)}100%{opacity:0;filter:alpha(opacity=0)}}@keyframes fx{50%{-webkit-transform:scale(1);transform:scale(1);opacity:1;filter:alpha(opacity=100)}100%{opacity:0;filter:alpha(opacity=0)}}

ثانيا ابحث عن هذا الوسم
 <body

وأضف أسفله هذه الأكواد

 <div class='pree-loading'>
<div class='loader-wrapper'>
  <img alt='logo' src='http://a.top4top.net/p_409nqa0b1.png' width='180px'/>
<div class='sk-wave'>
<div class='dot'/><div class='dot'/><div class='dot'/>
</div>
  </div></div>
<script>//<![CDATA[
// PreLoader
$(window).load(function()
{
  $(".pree-loading .dot").fadeOut(500);
  $(".pree-loading").fadeOut(500);
});
//]]> 
</script>
ولتغيير الشعار فقط غير الرابط الملون بالأخضر في الكود السابق برابط الشعار الخاص بمدونتك
ومبروك الإضافة.

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

إرسال تعليق

مقالات