* تحية طيبة لكل أصدقاء ، زوار ومتابعي واحة المعلوميات ، اليوم أتينا لكم بالجديد بهذه التدوينة الجديدة والتي سنقدم لكم فيها طريقة اضافة وتركيب صفحة أو تأثير التحميل الى مدوناتكم على بلوجر ، تم وضع الشرح نظرا لطلبات الأصدقاء بوضع هذا الشرح وكما وعدناكم فاليوم سنضع لكم النمودج الاول وفي التدوينات القادمة سنقدم نمادج أخرى بادن الله .
* الآن قد تتساءل " ما فائدة هده الثأثير ؟ "
- هذه الصفحة أو هذه الأداة تعطي تأثيرا رائعا لموقعك ، بحيث يبقى الزائر ينتظر حتى يتم تحميل جميع عناصر الصفحة ثم تختفي بعدها الأداة تلقائيا ، هذه الأداء نجدها في عدد كبير من المواقع على الويب أبرزها فيسبوك و تويتر ويوتيوب فمثلا يوتيوب يظهر شريط للتحميل ، وكدلك بتويتر مثلا أثناء رفع الصور ، وكذلك على واحة المعلوميات .
* والان ادا كنت تتساءل " كيف أضيف الثأثير لمدونتي ؟ "
- اليك الطريقة التي سنشرحها لك الآن وهي بسيطة للغاية ما عليك الا بمتابعة الشرح ودعمنا بتعليق للموضوع ان استفدت كدلك لنشر نمادج أخرى وجديدة في أقرب وقت :
* طريقة التركيب :
* توجه الى لوحة التحكم لمدونتك على بلوجر >>>> القالب
* ثم تبحث عن ]]></b:skin>
وتضع أعلاه الكود التالي :
/* Loader
===================== */
.loader {background-color: #6976C9;text-align: center;position:fixed;width:100%;height:100%;z-index:999999999;}
.spinner {width: 100px;height: 50px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;text-align: center;}
.spinner .ball {width: 20px;height: 20px;background-color: #fff;border-radius: 50%;display: inline-block;-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;}
.loader p {color: #fff;margin-top: 5px;font-family: sans-serif;letter-spacing: 3px;font-size: 10px;}
@-webkit-keyframes motion {0% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}25% {-webkit-transform: translateX(-50px) scale(0.3);transform: translateX(-50px) scale(0.3);}50% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}75% {-webkit-transform: translateX(50px) scale(0.3);transform: translateX(50px) scale(0.3);}100% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}}@keyframes motion {0% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}25% {-webkit-transform: translateX(-50px) scale(0.3);transform: translateX(-50px) scale(0.3);}50% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}75% {-webkit-transform: translateX(50px) scale(0.3);transform: translateX(50px) scale(0.3);}100% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}}
<div class='loader'>
<div class='spinner'>
<div class='ball'></div>
<p>LOADING</p>
</div>
</div>
* يمكنك تغيير LOADING بالكلمة التي تريد .
* وأخيرا نقوم بالبحث عن </body> ونضع الكود التالي أعلاه :
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).load(function(){
$(".loader").fadeOut(1700);
});
//]]>
</script>
شكرا لكن تأثير التحميل ينقص من سرعة المدونة الا تتفق معي ؟؟
ردحذفلا نفس الشيء بحيث يبقى الزائر ينتظر حتى يتم تحميل جميع عناصر الصفحة ثم تختفي بعدها الأداة تلقائيا
حذفشكرا شكرا
ردحذفشكرا لتعليقك الرائع والمحفز
حذفجميل اخي لكنه ينقص من سرعة تحميل الصفحة
ردحذفمرحبا خويا شكرا لتعليقك ^^
حذفشكرا لتعليقك الرائع والمحفز
ردحذف