الجمعة، 29 يوليو، 2016

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


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

  1. توجه الى مدونتك ، ثم قالب اختر تحرير : HTML 
  2. ثم ابحث عن <body> ، في حالة لم تعثر عليه ابحت عن هذا : body>
  3. ثم اخيرا اضف هذا الكود اسفل <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 <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> 

إسمي الكامل يوسف الحامدي ، مغربي الجنسية ، عمري 14 سنة أعشق التدوين المعلوماتي ومهتم بكل ما هو جديد في عالم التقنية

2 التعليقات

لقد تم حذف الصورة الخاصة بالموضوع او لم تضعها اخي فقط للتبليغ

شكرا لك ياصديقي على الإعلام=r


الابتساماتEmoticon