إضافة تأثير تحميل مدونات بلوجر بأشكال رائعة تعجبك

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

إضافة تأثير الصفحة لمدونات بلوجر تكون مهمة في بعض الأحيان وخصوصأ للمدونات التي تحتوي على مشاكل حيث تظهر المواضيع والاعلانات بشكل بطئ مع تداخل بعضها البعض والتي تعطي مظهر غير لأئق,ولكن مع أضافة تأثير التحميل لمدونتك سوف تختفي المشاكل ويجعل من عملية تصفح الموقع أفضل وبدون مشاكل.

طريقة إضافة تاثير تحميل المدونة للبلوجر

الشكل الأول-معاينة
1-توجه الى لوحة تحكم بلوجر واختر المظهر ومن ثم تحرير HTML
2-قم بالبحث عن وسم <body>
3-قم بنسخ ولصق الكود التالي أسفل وسم <body>

to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
border:1px solid #000;
}

#loader h4{color:#F5F5F5;}
#loader button {position:fixed;top:20px;right:20px;border:2px solid #fff;width:auto;height:auto;background:transparent;font-size:18px; font-family:'Droid Arabic Naskh',tahoma;cursor:pointer;color:#fff!important;transition: all 0.5s;}
#loader button:hover{color:red;background:#fff;color:#000!important;transition: all 0.5s;} 
#loader {position:fixed;width:100%;height:100%;background:#ffffff;z-index:999999999;}
#loader span {direction:rtl;font-size:18px;color:#fff;}
#loader #co {
   position:absolute;
   left:48%;
   top:40%;
   margin-left:-10px;
   margin-top:-10px;
}
</style>
<div id='loader'>
<div id='co'>
<center>
<img src='
https://www.qoinpro.com/assets/images/loading.svg'/><br/><br/>
</center>
</div>
</div>

4-قم بالبحث مرة أخرى عن كود </body>
5-قم بنسخ الكود التالي ولصقة أسفل كود </body>

6-قم بعملية الحفظ وشاهد النتيجة
الشكل الثاني-معاينة
1-توجة الى المظهر ومن ثم تحرير HTML
2-قم باليحث عن كود <body>
3-قم بنسخ الكود التالي ولصقة تحت الوسم body

<div class='containe'>
<div class='loader-wrapper'>
<img alt='logo' src='https://www.ebi.ac.uk/metagenomics/static/images/ajax-loader.gif' width='120'/>
</div>
</div>
<script>//<![CDATA[
// PreLoader
$(window).load(function()
{
  $(".loader-wrapper .loader").fadeOut(1700);
  $(".containe").fadeOut(1700);
    $('html').delay(1700).css({'overflow':'visible'});
});
//]]> 
</script>
<style>html{height:100%;overflow:hidden;}.containe{display: flex;align-items: center;justify-content: center;background: #ffffff;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 99999999999;}.loader-wrapper{position:relative;text-align:center;width:300px;height:125px}.loader{border-radius:50%;height:120px;width:120px;left:50%;position:absolute;top:50%;transform:translate3d(-50%,0px,0px);filter:url(#goo)}.loader span{position:absolute;left:50%;width:20px;height:20px;border-radius:50%;background-color:#fff;display:block;transform-origin:0 60px 0;animation-fill-mode:forwards;animation-duration:2500ms;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.74,0.23,0.1,0.95);animation-name:rotate}.pip-1{animation-delay:0}.pip-2{animation-delay:100ms}.pip-3{animation-delay:200ms}.pip-4{animation-delay:300ms}.pip-5{animation-delay:400ms}.pip-6{animation-delay:500ms}@keyframes rotate{0%{transform:rotate(0deg);width:20px;height:20px}50%{width:10px;height:10px}100%{transform:rotate(360deg);width:20px;height:20px}}</style>

4-قم بعملية الحفظ وشاهد النتيجة
تاثير تحميل المدونة أضافة جميلة تساعد على تحميل جميع المواضيع بدون مشاكل,الأضافات مجربة وهي تعمل بدون مشاكل على أكثر من مدونة ويمكنك ان تضيف هذا الأضافة الى مدونتك لكي تعطي مظهر سليم وجذاب للزائر,لاتنسى مشاركة الموضوع مع أصدقائك لكي يستفيد من هذا الأضافة على مدونتة.

محترفي التقنية

القائمة الرئيسية

الصفحات

إضافة تأثير تحميل مدونات بلوجر بأشكال رائعة تعجبك

طريقة إضافة تاثير تحميل المدونة للبلوجر

أخر المواضيع من قسم : اضافات بلوجر

تعليقات

إرسال تعليق