أضافة صفحة تحميل أحترافية النسخه الثانية



تم تصميم صفحة تحميل احترافية بعدما نالت صفحة التحميل النسخه الاولى اعجاب الكثير من زوار ومتابعين مدونة القيسي ويب واتمنى ان تعجبكم النسخة الثانية.
كما شرحت سابقا هذه الاضافة تعطي جمال لمدونتك وخصوصا عند تصفح الزائر لمدونتكــ اي انها تظهر عند تحميل صفحات مدونتك وتختفي عند انتهاء تحميل الصفحه لا اريد ان اطيل عليكم سوف اترككم مع الشرح . طريقة التركيب
1. قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم </b:skin> وضع فوقه/قبله الكود التالي

/* qaisi1web Material Loader */
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#eceff1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader{display:block;position:relative;left:-47%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%!important;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";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:"";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;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);-ms-transform:rotate(360deg);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)}}.loaded #loader-wrapper{visibility:hidden;-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}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.progress{background-color:rgba(255,64,129,0.22)}

2. ضع الكود التالي اسفل/بعد هذه الوسم <body> مباشرة

<div id='loader-wrapper'><div id='loader'/><div class='loader-section section-left'/><div class='loader-section section-right'/></div>

3. قم بحفظ القالب وشاهد النتيجه . . . اتمنى ان تنال اعجابكم 🌹
إقرأ أيضًا
أضافة صفحة تحميل احترافية v1
ان واجهت اي مشاكل تعليقاتكم مرحب بها . . . بالتوفيق 😍

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

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
أضافة صفحة تحميل أحترافية النسخه الثانية

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

14 التعليقات
كيف تعلق ؟

avatar

روعة أخي واصل

avatar

شكراا ليك اخي رووووعه

avatar

اخي لكن بعد ان يتم التحميل ينقلني الى صفحتك

avatar

يبدو انك تستخدم قالب من تصميم مدونة القيسي ويب وقد قمت بحذف حقوق التصميم، صفحة التحميل ليست سبب مشكلتك

avatar

نعم اخي
انا استخدم قالب فكرة مين

هل يوجد حل لهذه المشكلة
ارجواالرد باسرع وقت اخي

avatar

هل يوجد حل للمشكله
انا استخدم قالب فكرة مين

avatar

صديقي يبدو انك حذفت حقوق التصميم، اعدها وسوف يعود كل شي كما كان

avatar

اخي التحميل مستمر ولا ينقطع

avatar

بقية تدور

avatar
غير معرف 11/04/2017

لما الصق
<body>
ما تيجي

avatar

هل تقصد اننك لم تجده !
هذه الوسم موجود في كل قوالب بلوجر .. ابحث عنه بالشكل التالي
body>