أضافة تأثير تحميل المدونة على شكل سبنر (الاحترافية!!!)

السلام عليكم ....  , اليوم لدينا أضافة مميزة لمدونات 

بلوجر , رغم انها مميزة وجميلة حقاً , ألا ان الكثيير يجهلها , 

لدينا اليوم اضافة Preloading الاحترافية ,  الانٌ كثييراً 

يتسائل ما فائدة هذه الاضافة  ; سوف أجاوب على سؤالكم 

هذه الاضافة لتُعلم زوارك بأن الموقع قيد تحميل المحتوى 

وإظهاره بدون مشاكل أو نقص شيء ما لتقليل فقدان الزوار في 

تلك المهلة القصيرة.

   

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

1. 1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F 
2. 2.قم بالبحث فى قالب مدونتك عن الوسم </head> ثم قم بوضع الكود التالى فوقة

<style>
 div#loading-abdoutechnologie {
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 99999999999999999999;
    display: block;
    left: 0;
    top: 0;
    background: #333;
    width: 100%;
    height: 100%;
}



.fidget {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  width: 150px;
  height: 150px;
  overflow: hidden;
  -webkit-animation: rotate .85s linear infinite;
          animation: rotate .85s linear infinite;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(2);
            transform: translate(-50%, -50%) rotate(0) scale(2);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2);
            transform: translate(-50%, -50%) rotate(360deg) scale(2);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(2);
            transform: translate(-50%, -50%) rotate(0) scale(2);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2);
            transform: translate(-50%, -50%) rotate(360deg) scale(2);
  }
}
.end, .center2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: tomato;
}
.end:after, .center:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #333;
  content: '';
}

.center2 {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.end {
  z-index: 2;
}
.end:nth-child(1) {
  top: 5px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.end:nth-child(2) {
  bottom: 25px;
  right: 15px;
}
.end:nth-child(3) {
  bottom: 25px;
  left: 15px;
}

.gap {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: tomato;
  z-index: 1;
}
.gap:after {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  content: '';
}
.gap:nth-child(5) {
  top: 35px;
  left: 26px;
  -webkit-transform: rotate(-21deg);
          transform: rotate(-21deg);
}
.gap:nth-child(5):after {
  top: -15px;
  left: -15px;
}
.gap:nth-child(6) {
  top: 35px;
  right: 26px;
  -webkit-transform: rotate(21deg);
          transform: rotate(21deg);
}
.gap:nth-child(6):after {
  top: -15px;
  right: -15px;
}
.gap:nth-child(7) {
  bottom: 9px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.gap:nth-child(7):after {
  bottom: -15px;
}











  
  @-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(1.0)}
40%{-webkit-transform:scale(0.4)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(1.0)}
40%{transform:scale(1.0); -webkit-transform:scale(0.4)}
}
 
 
 </style>
        

4 قم بالبحث فى قالب مدونتك عن الوسم </body> ثم قم 

بوضع الكود التالى فوقة

<b:if cond='data:blog.pageType == "item"'>



<div id='loading-abdoutechnologie'>


<div class='fidget'>
 <div class='end'/>
 <div class='end'/>
 <div class='end'/>
 <div class='center2'/>
 <div class='gap'/>
 <div class='gap'/>
 <div class='gap'/>
</div>
</div>
</b:if>


<script type='text/javascript'>
  $(window).load(function(){  
   $("#loading-abdoutechnologie").fadeOut(1000)
  });
 </script>
        

المصدر فيصل ويب

عن الموضوع

إبلاغ عن خطأ

• أضافة تأثير تحميل المدونة على شكل سبنر (الاحترافية!!!)
• Unknown
• أكتوبر 08, 2017
• 0 اضف تعليق
•  مشاهدة

تقييمات المشاركة : أضافة تأثير تحميل المدونة على شكل سبنر (الاحترافية!!!) 9 على 10 مرتكز على 10 تقييمات. 9 تقييمات القراء.