404
لا يوجد أي شيء هنا. ! ألصفحه الرئيسية

الأحد، 19 نوفمبر 2017

اضافة تأثير تحميل بشكل جديد لقوالب بلوجر

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

المعاينه - اضغط هناا

والان بعد المعاينه نتجة الي شرح تركيب الاضافة

اولاا ابحث عن وسم <head/> او </head>

ثم ضع فوقة كود الاستايل التالي


<style>
 div#loading-yhmaklod{right:0;bottom:0;position:fixed;z-index:99999999999999999999;display:block;left:0;top:0;background:#fff;width:100%;height:100%}
.indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2)}
.indicator svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.indicator svg polyline#back{stroke:rgba(59,211,171,0.3)}
.indicator svg polyline#front{stroke:#3bd3ab;stroke-dasharray:12,36;stroke-dashoffset:48;animation:dash 1s linear infinite}
.cta{position:fixed;bottom:20px;right:30px;color:#222;font-weight:bold}
@-moz-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@-webkit-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@-o-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
</style>
   
بعد تركيب الاستايل تبحث علي وسم بداية البودي وتضع فوقة الكود التالي

ابحث عن <body> او <body

ثم ضع تحته مباشرة الكود التالي


<div id='loading-yhmaklod'>
<div class="indicator">

  <svg width="16px" height="12px">
    <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
    <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
  </svg>
</div>
</div>
<script type='text/javascript'>
  $(window).load(function(){
   $("#loading-yhmaklod").fadeOut(1000)
  });
 </script>
  

والان مبروك عليك تم تركيب الاضافة بنجاح وان واجهتك اي مشكلة لا تتردد ب وضع مشكلتك في الكومنت وسارد عليك ب حلها ان شاء الله
واتساب

كاتب الموضوع

أبراهيم مجدي

0 تعليق على موضوع : اضافة تأثير تحميل بشكل جديد لقوالب بلوجر

  • اضافة تعليق

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



    advertising

    advertising

    advertising

    advertising

    كاتب ومحرر في : مدونة يهمك
    جميع الحقوق محفوظة ل مدونة يهمك من تصميم Iprahem_Magdy