ملحوضة:
إن كان قالبك ثقيل فلا أنصحك بهذه الاضافة لأن الزائر سينتضر كثيرا حتى يمل من الإنتضار
سأترككم الان مع المعاينة والشرح .. تابعونا 😍😍
شرح طريقة تركيب التأثير ^^
- أولا: تذهب للمدونة
- ثم تحرير القالب
- ثم ابحث عن الوسم التالي باستعمال 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: 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://d.top4top.net/p_3735b3sn1.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>
ومبروك الإضافة.
اذا عجبكم درسنا لهذا اليوم فضعوا تعليقات بها رأيكم لتشجيعنا على تقديم الحصري.
وإن كانت هناك أي مشكلة من خلال التركيب فباب التعليقات مفتوج للجميع
وشكرا بكم 😘😘 تحياتي
رائع اخي واصل
ردحذفشكرا لك^^
حذفرائع
ردحذفشكرا لك :)
حذفلا استطيع نسخ الاكواد
ردحذفيمكنك نسخ الاكواد باستخذام Ctrl+c
حذف