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

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

ضع تقييمك من فضللك
[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>

 
 
مبروك عليك .

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

اضف رد

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

x

‎قد يُعجبك أيضاً

تحميل 5 قوالب بلوجر عربية إحترافية مجانا من متجر Picalica

ضع تقييمك من فضللك [Total: 2 Average: 4]تحميل 5 قوالب بلوجر عربية ...

Secured by Skytells Guard

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