* تحية طيبة لكل أصدقاء ، زوار ومتابعي فيرس المعلوميات ، اليوم أتينا لكم بالجديد بهذه التدوينة الجديدة والتي سنقدم لكم فيها طريقة اضافة وتركيب صفحة أو تأثير التحميل الى مدوناتكم على بلوجر ، تم وضع الشرح نظرا لطلبات الأصدقاء بوضع هذا الشرح وكما وعدناكم فاليوم سنضع لكم النمودج الاول وفي التدوينات القادمة سنقدم نمادج أخرى بادن الله .
* الآن قد تتساءل " ما فائدة هده الثأثير ؟ "
- هذه الصفحة أو هذه الأداة تعطي تأثيرا رائعا لموقعك ، بحيث يبقى الزائر ينتظر حتى يتم تحميل جميع عناصر الصفحة ثم تختفي بعدها الأداة تلقائيا ، هذه الأداء نجدها في عدد كبير من المواقع على الويب أبرزها فيسبوك و تويتر ويوتيوب فمثلا يوتيوب يظهر شريط للتحميل ، وكدلك بتويتر مثلا أثناء رفع الصور ، وكذلك على واحة المعلوميات .
* والان ادا كنت تتساءل " كيف أضيف الثأثير لمدونتي ؟ "
- اليك الطريقة التي سنشرحها لك الآن وهي بسيطة للغاية ما عليك الا بمتابعة الشرح ودعمنا بتعليق للموضوع ان استفدت كدلك لنشر نمادج أخرى وجديدة في أقرب وقت :
* طريقة التركيب :
* توجه الى لوحة التحكم لمدونتك على بلوجر >>>> القالب
* ثم تبحث عن ]]></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>
أزال المؤلف هذا التعليق.
ردحذف