0
السلام عليكم .... 1f603 , اليوم لدينا أضافة مميزة 2b50لمدونات بلوجر , رغم انها مميزة وجميلة حقاً , ألا ان الكثيير يجهلها , لدينا اليوم اضافة Preloading الاحترافية ,  الانٌ كثييراً يتسائل ما فائدة هذه الاضافة 2049 ; سوف أجاوب على سؤالكم هذه الاضافة لتُعلم زوارك بأن الموقع قيد تحميل المحتوى وإظهاره بدون مشاكل أو نقص شيء ما لتقليل فقدان الزوار في تلك المهلة القصيرة.
     شرح طريقة التركيب
  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>
        
المصدر فيصل ويب

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top