اضافة تأثير تحميل احترافي V1
مرحباً بك على نكهة التقنية ,يرجى استخدام الزر, Ctrl+C لنسخ الأكواد من مدونتنا, شكرا على زيارتكم ^^ .
مرحبا بكم زوار نكهة التقنية الكرام, الكثير منكم يحب أن تكون مدونتك به مستوى جمالية ممتازة وبهذا الصديد أقدم لكم تأثير احترافي لمدونات بلوجر ذو ألوان جذابة من البرتقالي اى الوردي بالاضافة الى تصميمه الأنيق يعطي جمالية للمدونة, حتى ان كانت مدونتك به بعض الحركات حين التحمبل فلن يراها الزائر أي ان التأثير يحجب عنها.
ملحوضة:
إن كان قالبك ثقيل فلا أنصحك بهذه الاضافة لأن الزائر سينتضر كثيرا حتى يمل من الإنتضار
سأترككم الان مع المعاينة والشرح .. تابعونا 😍😍
شرح طريقة تركيب التأثير ^^
طريقة التركيب سهلة وبسيطة وفي خطوات قليلة ويمكن لأي شخص القيام حتى ان كان مبتدأ.

  1. أولا: تذهب للمدونة
  2. ثم تحرير القالب
  3. ثم ابحث عن الوسم التالي باستعمال Cntr+F
]]></b:skin>

  1. والأن أضف فوقه كود 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)}}


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

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

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

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

هناك 4 تعليقات:

جميع الحقوق محفوظة نكهة التقنية | تصميم : الروسافي عمر