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

إعلان أدسنس

آخر المواضيع

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

السبت، 3 يونيو، 2017

5:29 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم .... �� , اليوم لدينا أضافة مميزة ⭐لمدونات بلوجر , رغم انها مميزة وجميلة حقاً , ألا ان الكثيير يجهلها , لدينا اليوم اضافة Preloading الاحترافية ,  الانٌ كثييراً يتسائل ما فائدة هذه الاضافة ⁉ ; سوف أجاوب على سؤالكم هذه الاضافة لتُعلم زوارك بأن الموقع قيد تحميل المحتوى وإظهاره بدون مشاكل أو نقص شيء ما لتقليل فقدان الزوار في تلك المهلة القصيرة.
     شرح طريقة التركيب
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F 

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>
        

إرسال تعليق

مقالات