أضافة صفحة تحميل احترافية ,حقا هذه الاضافة في غاية الروعه تعطي جمال لمدونتك وخصوصا حين تصفح الزائر لمدونتك اي انها تظهرعند تحميل صفحات مدونتك وتنتهي عندما ينتهي التحميل,اتمنى ان تعجبك 😉
اذا كنت تريد تطبيقها في مدونتك ما عليك الا ان تتابع هذه الشرح البسيط.
1 - قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم </head> وضع الكود التالي فوقه
رمز Code:
<style>#loaderqaisi1web{position:fixed;top:0;left:0;right:0;bottom:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4Xvygmhjh13pF0pgd4xd20AMaAsR8QEWbY3FzVRvbv8GjctQlc6u4MBZhQT15rJ_fHMEF1z1j3sDyueGLvwCoD4iMIG9FndRvzoWOd5OMD_jFQTqVDVPDgEqUQN711ECtT9z1h0tHGUi/s1600/pattern-qaisi1web.png) rgba(23, 38, 47, 0.93);z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}
#logo-qaisi1web{ margin:15% auto; width:400px;}
#logo-qaisi1web li.s-home{ display:inline ; font-weight:normal ;position:relative}
#logo-qaisi1web li.s-home a { color: rgba(240, 239, 239, 0.96) ; font-size: 33px ; font-family: GESSTwoLight,Great Vibes}
#logo-qaisi1web li.s-home:hover{background: none}
</style>2 - قم بوضع الكود التالي أسفل هذه الوسم <body>
رمز Code:
<div id='loaderqaisi1web'>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
<div id='logo-qaisi1web'><li class='s-home'>
<a><i class='fa fa-globe' style='color:#fff;padding-right:10px;font-size:24px'/> انتظر ثوان من فضلك..... </a></li></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".balls").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script>
3 - قم بحفظ قالب وشاهد النتيجة ☝
بالتوفيق للجميع . . .
بالتوفيق للجميع . . .
إرسال تعليق