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

شرح طريقة اضافة تأثير التحميل الاحترافي الى المواقع

ضع تقييمك من فضللك
[Total: 0 Average: 0]
 
 
مرحبا في درس جديد خاص باضافات البلوجر ، في هذه التدوينة سنشرح طريقة اضافة تأثير تحميل على مدونات البلوجر بطريقة احترافية و مميزة  تتناسب مع الشاشات و ايضا القوالب .
الاضافة جميلة جدا لمن يريد اضافة اشياء جديدة لمدونته فهذا يعني يبقى اختيار كل واحد ، أما شرح تلركيب الاضافة فهو جدا سهل فقط تابع معي اخي الكريم الشرح التالي :
 
  • توجه الى مدونتك ، ثم قالب 
  • اختر تحرير HTML  
  • ثم ابحث عن الكود الثالي 

<body>


 
  • في حالة لم تعثر عليه ابحث عن هذا

<body

  • ثم اخيرا اضف هذا الكود اسفل الكود السابق و اضغط على حفظ .


 

    <style>
      #loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;}
      #loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #3498db;-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */animation: spin 2s linear infinite;}
      #loader:before {content: &quot;&quot;;position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #e74c3c;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}
      #loader:after {content: &quot;&quot;;position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #f9c922;-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */animation: spin 1.5s linear infinite;}
      @-webkit-keyframes spin {0%   {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
        100% {-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);  /* IE 9 */transform: rotate(360deg);}
      }
      @keyframes spin {
        0%   {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
        100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}
      }
      #loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #222222;z-index: 1000;}
      #loader-wrapper .loader-section.section-left {left: 0;}
      #loader-wrapper .loader-section.section-right {right: 0;}
      #loader {z-index: 999999999999;}
      .loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);}
      .loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);}
      .loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
      .loaded #loader-wrapper .loader-section.section-right,
      .loaded #loader-wrapper .loader-section.section-left {-webkit-transition: all 0.3s 0.3s ease-out; transition: all 0.3s 0.3s ease-out;}
      .loaded #loader-wrapper {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 0.6s ease-out; transition: all 0.3s 0.6s ease-out;}
      .loaded #loader-wrapper .loader-section.section-right,
      .loaded #loader-wrapper .loader-section.section-left {-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
      .loaded #loader-wrapper {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out;}
    </style>
    <script>
      $(document).ready(function() {
        setTimeout(function(){
          $(&#39;body&#39;).addClass(&#39;loaded&#39;);
        }, 550);
      });
      setTimeout(function(){
        $(&#39;body&#39;).addClass(&#39;loaded&#39;);
      }, 10000);
    </script>
    <div id=’loader-wrapper’ style=’z-index:99999999999999;’>
      <div id=’loader’>
      </div>
      <div class=’loader-section section-left’>
      </div>
      <div class=’loader-section section-right’>
      </div>
    </div>

 
 
مبروك عليك .

عن المهندس الاول

محمد عبدالله:عربي الهوية مصري الجنسية /اعمل في مجال الانترنت و الكمبيوتر لهدف واحد ووحيد وهو مساعدة كل عربي مبتدئ وتأهيله للإعتماد علي نفسه بعد الله عز وجل وأرجو منكم مساعدتي في تحقيق الهدف بأن تكونو في عون بعضكم البعض كعرب دون النظر للجنسية أو الدين أو العرق .

اترك رد

المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف حماية - صيانة - تصميم - انترنت - برامج كامله -دورات ......