تحميل المزيد

حصريا اضافة تأثير التحميل عند التنقل بين الصفحات لمدونات البلوجر الاصدار الاول #1

ديسمبر 14, 2017
السلام عليكم و رحمة الله تعالى و بركاته
اهلا بكم زوار مدونة مدرسة المدون في حلقة جديدة تقدم لكم اضافة بلوجر تضاعف من احترافية مدونتك و هي اداة تحميل الصفحات
تجدها عند زيارة مدونتك او التنقل بين صفحاته او تحديثها و طريقة تركيبها سهلة جدا.

معاينة الاضافة:

طريقة التركيب:

اولا ابحث عن الوسم ]]></b:skin> و ضع الكود التالي فوقه تماما:

#spinner-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:99999}
.spinner{width:70px;text-align:center;position:absolute;top:43%;left:50%}
.spinner span{position:absolute;width:50px;height:50px;border:5px solid #3498db;border-radius:999px;animation:radar 2s infinite linear;opacity:0}
.spinner span:nth-child(1){animation-delay:0s}
.spinner  span:nth-child(2){animation-delay:0.66s}
.spinner span:nth-child(3){animation-delay:1.33s}
@keyframes radar{0%{transform:scale(0);opacity:0}25%{transform:scale(0);opacity:0.5}50%{transform:scale(1);opacity:1}75%{transform:scale(1.5);opacity:0.5}100%{transform:scale(2);opacity:0}}


ثانيا ابحث عن الوسم </body> و ضع الكود التالي فوقه:

<script type='text/javascript'>
/* <![CDATA[ */
$(window).load(function () {
 setTimeout(function () {
   $('.spinner').fadeOut("slow");
   setTimeout(function () {
   $('#spinner-loader').fadeOut("slow")
   }, 1000)
 }, 1000)
});
/* ]]> */
</script>

ثالثا و اخيرا ابحث عن الوسم <body و اضف الكود التالي فوقه:

<div id='spinner-loader'>
<div class='spinner'>
<span></span>
<span></span>
<span></span>
</div>
</div>

بعدها احفظ القالب و الف مبروك الاضافة الجديدة.
  • اضافة تعليق


    • الإبتساماتإخفاء

    الاشتراك في: تعليقات الرسالة (Atom)
    جميع الحقوق محفوظة لـ مدرسة المدون © 2021 تصميم و تكويد: نذير معلم